mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
Feature/shopping lists second try (#927)
* generate types * use generated types * ui updates * init button link for common styles * add links * setup label views * add delete confirmation * reset when not saved * link label to foods and auto set when adding to shopping list * generate types * use inheritence to manage exception handling * fix schema generation and add test for open_api generation * add header to api docs * move list consilidation to service * split list and list items controller * shopping list/list item tests - PARTIAL * enable recipe add/remove in shopping lists * generate types * linting * init global utility components * update types and add list item api * fix import cycle and database error * add container and border classes * new recipe list component * fix tests * breakout item editor * refactor item editor * update bulk actions * update input / color contrast * type generation * refactor controller dependencies * include food/unit editor * remove console.logs * fix and update type generation * fix incorrect type for column * fix postgres error * fix delete by variable * auto remove refs * fix typo
This commit is contained in:
Hayden
GitHub
parent
f794208862
commit
92cf97e401
66 changed files with 2556 additions and 685 deletions
|
|
@ -1,26 +1,32 @@
|
|||
<template>
|
||||
<v-container v-if="shoppingList" class="narrow-container">
|
||||
<v-container v-if="shoppingList" class="md-container">
|
||||
<BasePageTitle divider>
|
||||
<template #header>
|
||||
<v-img max-height="100" max-width="100" :src="require('~/static/svgs/shopping-cart.svg')"></v-img>
|
||||
</template>
|
||||
<template #title> {{ shoppingList.name }} </template>
|
||||
</BasePageTitle>
|
||||
<BannerExperimental issue="https://github.com/hay-kot/mealie/issues/916" />
|
||||
|
||||
<!-- Viewer -->
|
||||
<section v-if="!edit" class="py-2">
|
||||
<div v-if="!byLabel">
|
||||
<draggable :value="shoppingList.listItems" handle=".handle" @input="updateIndex">
|
||||
<ShoppingListItem
|
||||
v-for="(item, index) in listItems.unchecked"
|
||||
:key="item.id"
|
||||
v-model="listItems.unchecked[index]"
|
||||
:labels="allLabels"
|
||||
@checked="saveList"
|
||||
@save="saveList"
|
||||
/>
|
||||
<v-lazy v-for="(item, index) in listItems.unchecked" :key="item.id">
|
||||
<ShoppingListItem
|
||||
v-model="listItems.unchecked[index]"
|
||||
class="my-2 my-sm-0"
|
||||
:labels="allLabels"
|
||||
:units="allUnits || []"
|
||||
:foods="allFoods || []"
|
||||
@checked="saveListItem(item)"
|
||||
@save="saveListItem(item)"
|
||||
@delete="deleteListItem(item)"
|
||||
/>
|
||||
</v-lazy>
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
<!-- View By Label -->
|
||||
<div v-else>
|
||||
<div v-for="(value, key) in itemsByLabel" :key="key" class="mb-6">
|
||||
<div @click="toggleShowChecked()">
|
||||
|
|
@ -31,19 +37,84 @@
|
|||
</span>
|
||||
{{ key }}
|
||||
</div>
|
||||
<div v-for="item in value" :key="item.id" class="small-checkboxes d-flex justify-space-between align-center">
|
||||
<v-checkbox v-model="item.checked" hide-details dense :label="item.note" @change="saveList">
|
||||
<template #label>
|
||||
<div>
|
||||
{{ item.quantity }} <v-icon size="16" class="mx-1"> {{ $globals.icons.close }} </v-icon>
|
||||
{{ item.note }}
|
||||
</div>
|
||||
</template>
|
||||
</v-checkbox>
|
||||
</div>
|
||||
<v-lazy v-for="(item, index) in value" :key="item.id">
|
||||
<ShoppingListItem
|
||||
v-model="value[index]"
|
||||
:labels="allLabels"
|
||||
:units="allUnits || []"
|
||||
:foods="allFoods || []"
|
||||
@checked="saveListItem(item)"
|
||||
@save="saveListItem(item)"
|
||||
@delete="deleteListItem(item)"
|
||||
/>
|
||||
</v-lazy>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Item -->
|
||||
<div v-if="createEditorOpen">
|
||||
<ShoppingListItemEditor
|
||||
v-model="createListItemData"
|
||||
class="my-4"
|
||||
:labels="allLabels"
|
||||
:units="allUnits || []"
|
||||
:foods="allFoods || []"
|
||||
@delete="createEditorOpen = false"
|
||||
@cancel="createEditorOpen = false"
|
||||
@save="createListItem"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="mt-4 d-flex justify-end">
|
||||
<BaseButton create @click="createEditorOpen = true" />
|
||||
</div>
|
||||
|
||||
<!-- Action Bar -->
|
||||
<div class="d-flex justify-end mb-4 mt-2">
|
||||
<BaseButtonGroup
|
||||
:buttons="[
|
||||
{
|
||||
icon: $globals.icons.contentCopy,
|
||||
text: '',
|
||||
event: 'edit',
|
||||
children: [
|
||||
{
|
||||
icon: $globals.icons.contentCopy,
|
||||
text: 'Copy as Text',
|
||||
event: 'copy-plain',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.contentCopy,
|
||||
text: 'Copy as Markdown',
|
||||
event: 'copy-markdown',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.delete,
|
||||
text: 'Delete Checked',
|
||||
event: 'delete',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.tags,
|
||||
text: 'Toggle Label Sort',
|
||||
event: 'sort-by-labels',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.checkboxBlankOutline,
|
||||
text: 'Uncheck All Items',
|
||||
event: 'uncheck',
|
||||
},
|
||||
]"
|
||||
@edit="edit = true"
|
||||
@delete="deleteChecked"
|
||||
@uncheck="uncheckAll"
|
||||
@sort-by-labels="sortByLabels"
|
||||
@copy-plain="copyListItems('plain')"
|
||||
@copy-markdown="copyListItems('markdown')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Checked Items -->
|
||||
<div v-if="listItems.checked && listItems.checked.length > 0" class="mt-6">
|
||||
<button @click="toggleShowChecked()">
|
||||
<span>
|
||||
|
|
@ -56,133 +127,60 @@
|
|||
<v-divider class="my-4"></v-divider>
|
||||
<v-expand-transition>
|
||||
<div v-show="showChecked">
|
||||
<div v-for="item in listItems.checked" :key="item.id" class="d-flex justify-space-between align-center">
|
||||
<v-checkbox v-model="item.checked" color="gray" class="my-n2" :label="item.note" @change="saveList">
|
||||
<template #label>
|
||||
<div style="text-decoration: line-through">
|
||||
{{ item.quantity }} x
|
||||
{{ item.note }}
|
||||
</div>
|
||||
</template>
|
||||
</v-checkbox>
|
||||
<div v-for="(item, idx) in listItems.checked" :key="item.id">
|
||||
<ShoppingListItem
|
||||
v-model="listItems.checked[idx]"
|
||||
class="strike-through-note"
|
||||
:labels="allLabels"
|
||||
:units="allUnits || []"
|
||||
:foods="allFoods || []"
|
||||
@checked="saveListItem(item)"
|
||||
@save="saveListItem(item)"
|
||||
@delete="deleteListItem(item)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Editor -->
|
||||
<section v-else>
|
||||
<draggable :value="shoppingList.listItems" handle=".handle" @input="updateIndex">
|
||||
<div v-for="(item, index) in shoppingList.listItems" :key="index" class="d-flex">
|
||||
<div class="number-input-container">
|
||||
<v-text-field v-model="shoppingList.listItems[index].quantity" class="mx-1" type="number" label="Qty" />
|
||||
</div>
|
||||
<v-text-field v-model="item.note" :label="$t('general.name')"> </v-text-field>
|
||||
<v-menu offset-x left>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn icon class="mt-3" v-bind="attrs" v-on="on">
|
||||
<v-icon class="handle">
|
||||
{{ $globals.icons.arrowUpDown }}
|
||||
</v-icon>
|
||||
<!-- Recipe References -->
|
||||
<v-lazy v-if="shoppingList.recipeReferences && shoppingList.recipeReferences.length > 0">
|
||||
<section>
|
||||
<div>
|
||||
<span>
|
||||
<v-icon left class="mb-1">
|
||||
{{ $globals.icons.primary }}
|
||||
</v-icon>
|
||||
</span>
|
||||
{{ shoppingList.recipeReferences ? shoppingList.recipeReferences.length : 0 }} Linked Recipes
|
||||
</div>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<RecipeList :recipes="listRecipes">
|
||||
<template v-for="(recipe, index) in listRecipes" #[`actions-${recipe.id}`]>
|
||||
<v-list-item-action :key="'item-actions-decrease' + recipe.id">
|
||||
<v-btn icon @click.prevent="removeRecipeReferenceToList(recipe.id)">
|
||||
<v-icon color="grey lighten-1">{{ $globals.icons.minus }}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="(itm, idx) in contextMenu"
|
||||
:key="idx"
|
||||
@click="contextMenuAction(itm.action, item, index)"
|
||||
>
|
||||
<v-list-item-title>{{ itm.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<div v-if="item.isFood">Is Food</div>
|
||||
</div>
|
||||
</draggable>
|
||||
</v-list-item-action>
|
||||
<div :key="'item-actions-quantity' + recipe.id" class="pl-3">
|
||||
{{ shoppingList.recipeReferences[index].recipeQuantity }}
|
||||
</div>
|
||||
<v-list-item-action :key="'item-actions-increase' + recipe.id">
|
||||
<v-btn icon @click.prevent="addRecipeReferenceToList(recipe.id)">
|
||||
<v-icon color="grey lighten-1">{{ $globals.icons.createAlt }}</v-icon>
|
||||
</v-btn>
|
||||
</v-list-item-action>
|
||||
</template>
|
||||
</RecipeList>
|
||||
</section>
|
||||
</v-lazy>
|
||||
|
||||
<v-divider class="my-2" />
|
||||
|
||||
<!-- Create Form -->
|
||||
<v-form @submit.prevent="ingredientCreate()">
|
||||
<v-checkbox v-model="createIngredient.isFood" label="Treat list item as a recipe ingredient" />
|
||||
<div class="d-flex">
|
||||
<div class="number-input-container">
|
||||
<v-text-field v-model="createIngredient.quantity" class="mx-1" type="number" label="Qty" />
|
||||
</div>
|
||||
<v-text-field v-model="createIngredient.note" :label="$t('recipe.note')"> </v-text-field>
|
||||
</div>
|
||||
<div v-if="createIngredient.isFood">Is Food</div>
|
||||
<v-autocomplete
|
||||
v-model="createIngredient.labelId"
|
||||
clearable
|
||||
name=""
|
||||
:items="allLabels"
|
||||
item-value="id"
|
||||
item-text="name"
|
||||
>
|
||||
</v-autocomplete>
|
||||
<div class="d-flex justify-end">
|
||||
<BaseButton type="submit" create> </BaseButton>
|
||||
</div>
|
||||
</v-form>
|
||||
</section>
|
||||
<div class="d-flex justify-end my-4">
|
||||
<BaseButtonGroup
|
||||
v-if="!edit"
|
||||
:buttons="[
|
||||
{
|
||||
icon: $globals.icons.contentCopy,
|
||||
text: '',
|
||||
event: 'edit',
|
||||
children: [
|
||||
{
|
||||
icon: $globals.icons.contentCopy,
|
||||
text: 'Copy as Text',
|
||||
event: 'copy-plain',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.contentCopy,
|
||||
text: 'Copy as Markdown',
|
||||
event: 'copy-markdown',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.delete,
|
||||
text: 'Delete Checked',
|
||||
event: 'delete',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.tags,
|
||||
text: 'Toggle Label Sort',
|
||||
event: 'sort-by-labels',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.checkboxBlankOutline,
|
||||
text: 'Uncheck All Items',
|
||||
event: 'uncheck',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.primary,
|
||||
text: 'Add Recipe',
|
||||
event: 'recipe',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.edit,
|
||||
text: 'Edit List',
|
||||
event: 'edit',
|
||||
},
|
||||
]"
|
||||
@edit="edit = true"
|
||||
@delete="deleteChecked"
|
||||
@uncheck="uncheckAll"
|
||||
@sort-by-labels="sortByLabels"
|
||||
@copy-plain="copyListItems('plain')"
|
||||
@copy-markdown="copyListItems('markdown')"
|
||||
/>
|
||||
<BaseButton v-else save @click="saveList" />
|
||||
</div>
|
||||
<v-lazy>
|
||||
<div class="d-flex justify-end mt-10">
|
||||
<ButtonLink to="/shopping-lists/labels" text="Manage Labels" :icon="$globals.icons.tags" />
|
||||
</div>
|
||||
</v-lazy>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -190,14 +188,17 @@
|
|||
import draggable from "vuedraggable";
|
||||
|
||||
import { defineComponent, useAsync, useRoute, computed, ref } from "@nuxtjs/composition-api";
|
||||
import { useClipboard, useToggle } from "@vueuse/core";
|
||||
import { ShoppingListItemCreate } from "~/api/class-interfaces/group-shopping-lists";
|
||||
import { useToggle } from "@vueuse/core";
|
||||
import { useCopyList } from "~/composables/use-copy";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useAsyncKey, uuid4 } from "~/composables/use-utils";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
import { Label } from "~/api/class-interfaces/group-multiple-purpose-labels";
|
||||
import { useAsyncKey } from "~/composables/use-utils";
|
||||
import ShoppingListItem from "~/components/Domain/ShoppingList/ShoppingListItem.vue";
|
||||
import BannerExperimental from "~/components/global/BannerExperimental.vue";
|
||||
import { MultiPurposeLabelOut } from "~/types/api-types/labels";
|
||||
import { ShoppingListItemCreate, ShoppingListItemOut } from "~/types/api-types/group";
|
||||
import RecipeList from "~/components/Domain/Recipe/RecipeList.vue";
|
||||
import ShoppingListItemEditor from "~/components/Domain/ShoppingList/ShoppingListItemEditor.vue";
|
||||
import { getDisplayText } from "~/composables/use-display-text";
|
||||
|
||||
type CopyTypes = "plain" | "markdown";
|
||||
|
||||
interface PresentLabel {
|
||||
|
|
@ -209,7 +210,8 @@ export default defineComponent({
|
|||
components: {
|
||||
draggable,
|
||||
ShoppingListItem,
|
||||
BannerExperimental,
|
||||
RecipeList,
|
||||
ShoppingListItemEditor,
|
||||
},
|
||||
setup() {
|
||||
const userApi = useUserApi();
|
||||
|
|
@ -220,6 +222,9 @@ export default defineComponent({
|
|||
const route = useRoute();
|
||||
const id = route.value.params.id;
|
||||
|
||||
// ===============================================================
|
||||
// Shopping List Actions
|
||||
|
||||
const shoppingList = useAsync(async () => {
|
||||
return await fetchShoppingList();
|
||||
}, useAsyncKey());
|
||||
|
|
@ -233,121 +238,40 @@ export default defineComponent({
|
|||
shoppingList.value = await fetchShoppingList();
|
||||
}
|
||||
|
||||
async function saveList() {
|
||||
if (!shoppingList.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set Position
|
||||
shoppingList.value.listItems = shoppingList.value.listItems.map((itm: ShoppingListItemCreate, idx: number) => {
|
||||
itm.position = idx;
|
||||
return itm;
|
||||
});
|
||||
|
||||
await userApi.shopping.lists.updateOne(id, shoppingList.value);
|
||||
refresh();
|
||||
edit.value = false;
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// Ingredient CRUD
|
||||
// List Item CRUD
|
||||
|
||||
const listItems = computed(() => {
|
||||
return {
|
||||
checked: shoppingList.value?.listItems.filter((item) => item.checked),
|
||||
unchecked: shoppingList.value?.listItems.filter((item) => !item.checked),
|
||||
checked: shoppingList.value?.listItems?.filter((item) => item.checked) ?? [],
|
||||
unchecked: shoppingList.value?.listItems?.filter((item) => !item.checked) ?? [],
|
||||
};
|
||||
});
|
||||
|
||||
const createIngredient = ref(ingredientResetFactory());
|
||||
|
||||
function ingredientResetFactory() {
|
||||
return {
|
||||
id: null,
|
||||
shoppingListId: id,
|
||||
checked: false,
|
||||
position: shoppingList.value?.listItems.length || 1,
|
||||
isFood: false,
|
||||
quantity: 1,
|
||||
note: "",
|
||||
unit: null,
|
||||
food: null,
|
||||
labelId: null,
|
||||
};
|
||||
}
|
||||
|
||||
function ingredientCreate() {
|
||||
const item = { ...createIngredient.value, id: uuid4() };
|
||||
shoppingList.value?.listItems.push(item);
|
||||
createIngredient.value = ingredientResetFactory();
|
||||
}
|
||||
|
||||
function updateIndex(data: ShoppingListItemCreate[]) {
|
||||
if (shoppingList.value?.listItems) {
|
||||
shoppingList.value.listItems = data;
|
||||
}
|
||||
|
||||
if (!edit.value) {
|
||||
saveList();
|
||||
}
|
||||
}
|
||||
|
||||
const [showChecked, toggleShowChecked] = useToggle(false);
|
||||
|
||||
// =====================================
|
||||
// Copy List Items
|
||||
|
||||
const { copy, copied, isSupported } = useClipboard();
|
||||
const copy = useCopyList();
|
||||
|
||||
function getItemsAsPlain(items: ShoppingListItemCreate[]) {
|
||||
return items
|
||||
.map((item) => {
|
||||
return `${item.quantity} x ${item.unit?.name || ""} ${item.food?.name || ""} ${item.note || ""}`.replace(
|
||||
/\s+/g,
|
||||
" "
|
||||
);
|
||||
})
|
||||
.join("\n");
|
||||
}
|
||||
|
||||
function getItemsAsMarkdown(items: ShoppingListItemCreate[]) {
|
||||
return items
|
||||
.map((item) => {
|
||||
return `- [ ] ${item.quantity} x ${item.unit?.name || ""} ${item.food?.name || ""} ${
|
||||
item.note || ""
|
||||
}`.replace(/\s+/g, " ");
|
||||
})
|
||||
.join("\n");
|
||||
}
|
||||
|
||||
async function copyListItems(copyType: CopyTypes) {
|
||||
if (!isSupported) {
|
||||
alert.error("Copy to clipboard is not supported in your browser or environment.");
|
||||
}
|
||||
|
||||
console.log("copyListItems", copyType);
|
||||
const items = shoppingList.value?.listItems.filter((item) => !item.checked);
|
||||
function copyListItems(copyType: CopyTypes) {
|
||||
const items = shoppingList.value?.listItems?.filter((item) => !item.checked);
|
||||
|
||||
if (!items) {
|
||||
return;
|
||||
}
|
||||
|
||||
let text = "";
|
||||
const text = items.map((itm) => getDisplayText(itm.note, itm.quantity, itm.food, itm.unit));
|
||||
|
||||
switch (copyType) {
|
||||
case "markdown":
|
||||
text = getItemsAsMarkdown(items);
|
||||
copy.copyMarkdownCheckList(text);
|
||||
break;
|
||||
default:
|
||||
text = getItemsAsPlain(items);
|
||||
copy.copyPlain(text);
|
||||
break;
|
||||
}
|
||||
|
||||
await copy(text);
|
||||
|
||||
if (copied) {
|
||||
alert.success(`Copied ${items.length} items to clipboard`);
|
||||
}
|
||||
}
|
||||
|
||||
// =====================================
|
||||
|
|
@ -355,29 +279,27 @@ export default defineComponent({
|
|||
|
||||
function uncheckAll() {
|
||||
let hasChanged = false;
|
||||
shoppingList.value?.listItems.forEach((item) => {
|
||||
shoppingList.value?.listItems?.forEach((item) => {
|
||||
if (item.checked) {
|
||||
hasChanged = true;
|
||||
item.checked = false;
|
||||
}
|
||||
});
|
||||
if (hasChanged) {
|
||||
saveList();
|
||||
updateListItems();
|
||||
}
|
||||
}
|
||||
|
||||
function deleteChecked() {
|
||||
const unchecked = shoppingList.value?.listItems.filter((item) => !item.checked);
|
||||
const checked = shoppingList.value?.listItems?.filter((item) => item.checked);
|
||||
|
||||
if (unchecked?.length === shoppingList.value?.listItems.length) {
|
||||
if (!checked || checked?.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (shoppingList.value?.listItems) {
|
||||
shoppingList.value.listItems = unchecked || [];
|
||||
}
|
||||
deleteListItems(checked);
|
||||
|
||||
saveList();
|
||||
refresh();
|
||||
}
|
||||
|
||||
// =====================================
|
||||
|
|
@ -393,7 +315,7 @@ export default defineComponent({
|
|||
{ title: "Ingredient", action: contextActions.setIngredient },
|
||||
];
|
||||
|
||||
function contextMenuAction(action: string, item: ShoppingListItemCreate, idx: number) {
|
||||
function contextMenuAction(action: string, item: ShoppingListItemOut, idx: number) {
|
||||
if (!shoppingList.value?.listItems) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -411,9 +333,20 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
// =====================================
|
||||
// Labels
|
||||
// Labels, Units, Foods
|
||||
// TODO: Extract to Composable
|
||||
|
||||
const allLabels = ref([] as Label[]);
|
||||
const allLabels = ref([] as MultiPurposeLabelOut[]);
|
||||
|
||||
const allUnits = useAsync(async () => {
|
||||
const { data } = await userApi.units.getAll();
|
||||
return data ?? [];
|
||||
}, useAsyncKey());
|
||||
|
||||
const allFoods = useAsync(async () => {
|
||||
const { data } = await userApi.foods.getAll();
|
||||
return data ?? [];
|
||||
}, useAsyncKey());
|
||||
|
||||
function sortByLabels() {
|
||||
byLabel.value = !byLabel.value;
|
||||
|
|
@ -422,10 +355,9 @@ export default defineComponent({
|
|||
const presentLabels = computed(() => {
|
||||
const labels: PresentLabel[] = [];
|
||||
|
||||
shoppingList.value?.listItems.forEach((item) => {
|
||||
if (item.labelId) {
|
||||
shoppingList.value?.listItems?.forEach((item) => {
|
||||
if (item.labelId && item.label) {
|
||||
labels.push({
|
||||
// @ts-ignore TODO
|
||||
name: item.label.name,
|
||||
id: item.labelId,
|
||||
});
|
||||
|
|
@ -442,7 +374,11 @@ export default defineComponent({
|
|||
"No Label": [] as ShoppingListItemCreate[],
|
||||
};
|
||||
|
||||
shoppingList.value?.listItems.forEach((item) => {
|
||||
shoppingList.value?.listItems?.forEach((item) => {
|
||||
if (item.checked) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.labelId) {
|
||||
if (item.label && item.label.name in items) {
|
||||
items[item.label.name].push(item);
|
||||
|
|
@ -468,26 +404,164 @@ export default defineComponent({
|
|||
|
||||
refreshLabels();
|
||||
|
||||
// =====================================
|
||||
// Add/Remove Recipe References
|
||||
|
||||
const listRecipes = computed<Array<any>>(() => {
|
||||
return shoppingList.value?.recipeReferences?.map((ref) => ref.recipe) ?? [];
|
||||
});
|
||||
|
||||
async function addRecipeReferenceToList(recipeId: number) {
|
||||
if (!shoppingList.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await userApi.shopping.lists.addRecipe(shoppingList.value.id, recipeId);
|
||||
|
||||
if (data) {
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
|
||||
async function removeRecipeReferenceToList(recipeId: number) {
|
||||
if (!shoppingList.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await userApi.shopping.lists.removeRecipe(shoppingList.value.id, recipeId);
|
||||
|
||||
if (data) {
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// List Item CRUD
|
||||
|
||||
async function saveListItem(item: ShoppingListItemOut) {
|
||||
if (!shoppingList.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await userApi.shopping.items.updateOne(item.id, item);
|
||||
|
||||
if (data) {
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteListItem(item: ShoppingListItemOut) {
|
||||
if (!shoppingList.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await userApi.shopping.items.deleteOne(item.id);
|
||||
|
||||
if (data) {
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// Create New Item
|
||||
|
||||
const createEditorOpen = ref(false);
|
||||
const createListItemData = ref<ShoppingListItemCreate>(ingredientResetFactory());
|
||||
|
||||
function ingredientResetFactory(): ShoppingListItemCreate {
|
||||
return {
|
||||
shoppingListId: id,
|
||||
checked: false,
|
||||
position: shoppingList.value?.listItems?.length || 1,
|
||||
isFood: false,
|
||||
quantity: 1,
|
||||
note: "",
|
||||
unit: undefined,
|
||||
food: undefined,
|
||||
labelId: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
async function createListItem() {
|
||||
if (!shoppingList.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await userApi.shopping.items.createOne(createListItemData.value);
|
||||
|
||||
if (data) {
|
||||
createListItemData.value = ingredientResetFactory();
|
||||
createEditorOpen.value = false;
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
|
||||
function updateIndex(data: ShoppingListItemOut[]) {
|
||||
if (shoppingList.value?.listItems) {
|
||||
shoppingList.value.listItems = data;
|
||||
}
|
||||
|
||||
updateListItems();
|
||||
}
|
||||
|
||||
async function deleteListItems(items: ShoppingListItemOut[]) {
|
||||
if (!shoppingList.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await userApi.shopping.items.deleteMany(items);
|
||||
|
||||
if (data) {
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
|
||||
async function updateListItems() {
|
||||
if (!shoppingList.value?.listItems) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set Position
|
||||
shoppingList.value.listItems = shoppingList.value.listItems.map((itm: ShoppingListItemOut, idx: number) => {
|
||||
itm.position = idx;
|
||||
return itm;
|
||||
});
|
||||
|
||||
const { data } = await userApi.shopping.items.updateMany(shoppingList.value.listItems);
|
||||
|
||||
if (data) {
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
itemsByLabel,
|
||||
byLabel,
|
||||
presentLabels,
|
||||
addRecipeReferenceToList,
|
||||
updateListItems,
|
||||
allLabels,
|
||||
copyListItems,
|
||||
sortByLabels,
|
||||
uncheckAll,
|
||||
showChecked,
|
||||
toggleShowChecked,
|
||||
createIngredient,
|
||||
contextMenuAction,
|
||||
byLabel,
|
||||
contextMenu,
|
||||
contextMenuAction,
|
||||
copyListItems,
|
||||
createEditorOpen,
|
||||
createListItem,
|
||||
createListItemData,
|
||||
deleteChecked,
|
||||
listItems,
|
||||
updateIndex,
|
||||
saveList,
|
||||
deleteListItem,
|
||||
edit,
|
||||
itemsByLabel,
|
||||
listItems,
|
||||
listRecipes,
|
||||
presentLabels,
|
||||
removeRecipeReferenceToList,
|
||||
saveListItem,
|
||||
shoppingList,
|
||||
ingredientCreate,
|
||||
showChecked,
|
||||
sortByLabels,
|
||||
toggleShowChecked,
|
||||
uncheckAll,
|
||||
updateIndex,
|
||||
allUnits,
|
||||
allFoods,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
|
|
@ -503,3 +577,4 @@ export default defineComponent({
|
|||
max-width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue