mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-03 04:25: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>
|
||||
|
||||
|
|
|
|||
|
|
@ -32,6 +32,9 @@
|
|||
</v-card-title>
|
||||
</v-card>
|
||||
</section>
|
||||
<div class="d-flex justify-end mt-10">
|
||||
<ButtonLink to="/shopping-lists/labels" text="Manage Labels" :icon="$globals.icons.tags" />
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
266
frontend/pages/shopping-lists/labels.vue
Normal file
266
frontend/pages/shopping-lists/labels.vue
Normal file
|
|
@ -0,0 +1,266 @@
|
|||
<template>
|
||||
<v-container class="narrow-container">
|
||||
<BaseDialog v-model="createDialog" title="New Label" :icon="$globals.icons.tags" @submit="createLabel">
|
||||
<v-card-text>
|
||||
<v-text-field v-model="createLabelData.name" :label="$t('general.name')"> </v-text-field>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<BaseDialog
|
||||
v-model="deleteDialog"
|
||||
:title="$t('general.confirm')"
|
||||
:icon="$globals.icons.alert"
|
||||
color="error"
|
||||
@confirm="confirmDelete"
|
||||
>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<BasePageTitle divider>
|
||||
<template #header>
|
||||
<v-img max-height="100" max-width="100" :src="require('~/static/svgs/shopping-cart.svg')"></v-img>
|
||||
</template>
|
||||
<template #title> Shopping Lists Labels </template>
|
||||
</BasePageTitle>
|
||||
<BaseButton create @click="createDialog = true" />
|
||||
|
||||
<section v-if="labels" class="mt-4">
|
||||
<v-text-field v-model="searchInput" :label="$t('sidebar.search')" clearable>
|
||||
<template #prepend>
|
||||
<v-icon>{{ $globals.icons.search }}</v-icon>
|
||||
</template>
|
||||
</v-text-field>
|
||||
|
||||
<v-sheet v-for="(label, index) in results" :key="label.id">
|
||||
<div class="d-flex px-2 py-2 pt-3">
|
||||
<MultiPurposeLabel :label="label" />
|
||||
|
||||
<div class="ml-auto">
|
||||
<v-btn v-if="!isOpen[label.id]" class="mx-1" icon @click.prevent="deleteLabel(label.id)">
|
||||
<v-icon>
|
||||
{{ $globals.icons.delete }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
<v-btn v-if="!isOpen[label.id]" class="mx-1" icon @click="toggleIsOpen(label)">
|
||||
<v-icon>
|
||||
{{ $globals.icons.edit }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
<v-card-text v-if="isOpen[label.id]">
|
||||
<div class="d-md-flex" style="gap: 30px">
|
||||
<v-text-field v-model="labels[index].name" :label="$t('general.name')"> </v-text-field>
|
||||
<div style="max-width: 300px">
|
||||
<InputColor v-model="labels[index].color" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-end">
|
||||
<BaseButtonGroup
|
||||
:buttons="[
|
||||
{
|
||||
icon: $globals.icons.delete,
|
||||
text: 'Delete',
|
||||
event: 'delete',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.close,
|
||||
text: 'Cancel',
|
||||
event: 'cancel',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.save,
|
||||
text: 'Save',
|
||||
event: 'save',
|
||||
},
|
||||
]"
|
||||
@cancel="resetToLastGoodValue(label, index)"
|
||||
@save="updateLabel(label)"
|
||||
@delete="deleteLabel(label.id)"
|
||||
/>
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
</v-sheet>
|
||||
</section>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, useAsync, computed } from "@nuxtjs/composition-api";
|
||||
import Fuse from "fuse.js";
|
||||
import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabel.vue";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useAsyncKey } from "~/composables/use-utils";
|
||||
import { MultiPurposeLabelSummary } from "~/types/api-types/labels";
|
||||
export default defineComponent({
|
||||
components: { MultiPurposeLabel },
|
||||
setup() {
|
||||
// ==========================================================
|
||||
// API Operations
|
||||
|
||||
const api = useUserApi();
|
||||
|
||||
const deleteDialog = ref(false);
|
||||
const deleteTargetId = ref("");
|
||||
|
||||
async function confirmDelete() {
|
||||
await api.multiPurposeLabels.deleteOne(deleteTargetId.value);
|
||||
refreshLabels();
|
||||
deleteTargetId.value = "";
|
||||
}
|
||||
|
||||
function deleteLabel(itemId: string) {
|
||||
deleteTargetId.value = itemId;
|
||||
deleteDialog.value = true;
|
||||
}
|
||||
|
||||
const createDialog = ref(false);
|
||||
|
||||
const createLabelData = ref({
|
||||
name: "",
|
||||
color: "",
|
||||
});
|
||||
|
||||
async function createLabel() {
|
||||
createLabelData.value.color = getRandomHex();
|
||||
const { data } = await api.multiPurposeLabels.createOne(createLabelData.value);
|
||||
if (data) {
|
||||
refreshLabels();
|
||||
}
|
||||
}
|
||||
|
||||
async function updateLabel(label: MultiPurposeLabelSummary) {
|
||||
const { data } = await api.multiPurposeLabels.updateOne(label.id, label);
|
||||
if (data) {
|
||||
refreshLabels();
|
||||
toggleIsOpen(label);
|
||||
}
|
||||
}
|
||||
|
||||
const labels = useAsync(async () => {
|
||||
const { data } = await api.multiPurposeLabels.getAll();
|
||||
return data;
|
||||
}, useAsyncKey());
|
||||
|
||||
async function refreshLabels() {
|
||||
const { data } = await api.multiPurposeLabels.getAll();
|
||||
labels.value = data ?? [];
|
||||
}
|
||||
|
||||
// ==========================================================
|
||||
// Component Helpers
|
||||
|
||||
const lastGoodValue = ref<{ [key: string]: MultiPurposeLabelSummary }>({});
|
||||
|
||||
function saveLastGoodValue(label: MultiPurposeLabelSummary) {
|
||||
lastGoodValue.value[label.id] = { ...label };
|
||||
}
|
||||
|
||||
function resetToLastGoodValue(label: MultiPurposeLabelSummary, index: number) {
|
||||
const lgv = lastGoodValue.value[label.id];
|
||||
|
||||
if (lgv && labels.value) {
|
||||
labels.value[index] = lgv;
|
||||
labels.value = [...labels.value];
|
||||
}
|
||||
|
||||
toggleIsOpen(label);
|
||||
}
|
||||
|
||||
const isOpen = ref<{ [key: string]: boolean }>({});
|
||||
|
||||
function toggleIsOpen(label: MultiPurposeLabelSummary) {
|
||||
isOpen.value[label.id] = !isOpen.value[label.id];
|
||||
|
||||
if (isOpen.value[label.id]) {
|
||||
saveLastGoodValue(label);
|
||||
}
|
||||
|
||||
isOpen.value = { ...isOpen.value };
|
||||
}
|
||||
|
||||
// ==========================================================
|
||||
// Color Generators
|
||||
|
||||
function getRandomHex() {
|
||||
const letters = "BCDEF".split("");
|
||||
let color = "#";
|
||||
for (let i = 0; i < 6; i++) {
|
||||
color += letters[Math.floor(Math.random() * letters.length)];
|
||||
}
|
||||
|
||||
return color;
|
||||
}
|
||||
|
||||
function setRandomHex(labelIndex: number) {
|
||||
if (!labels.value) {
|
||||
return;
|
||||
}
|
||||
labels.value[labelIndex].color = getRandomHex();
|
||||
labels.value = [...labels.value];
|
||||
}
|
||||
|
||||
// ==========================================================
|
||||
// Search / Filter
|
||||
|
||||
const searchInput = ref("");
|
||||
|
||||
const labelNames = computed(() => {
|
||||
return labels.value?.map((label) => label.name) ?? [];
|
||||
});
|
||||
|
||||
const fuseOpts = {
|
||||
shouldSort: true,
|
||||
threshold: 0.5,
|
||||
location: 0,
|
||||
distance: 100,
|
||||
findAllMatches: true,
|
||||
maxPatternLength: 32,
|
||||
minMatchCharLength: 2,
|
||||
keys: ["name"],
|
||||
};
|
||||
|
||||
const fuse = computed(() => {
|
||||
return new Fuse(labelNames.value, fuseOpts);
|
||||
});
|
||||
|
||||
const results = computed(() => {
|
||||
if (!searchInput.value) {
|
||||
return labels.value;
|
||||
}
|
||||
|
||||
const foundName = fuse.value.search(searchInput.value).map((result) => result.item);
|
||||
|
||||
return labels.value?.filter((label) => foundName.includes(label.name)) ?? [];
|
||||
});
|
||||
|
||||
return {
|
||||
saveLastGoodValue,
|
||||
resetToLastGoodValue,
|
||||
deleteDialog,
|
||||
deleteTargetId,
|
||||
confirmDelete,
|
||||
createLabelData,
|
||||
createLabel,
|
||||
createDialog,
|
||||
results,
|
||||
searchInput,
|
||||
updateLabel,
|
||||
deleteLabel,
|
||||
setRandomHex,
|
||||
toggleIsOpen,
|
||||
isOpen,
|
||||
labels,
|
||||
refreshLabels,
|
||||
};
|
||||
},
|
||||
head: {
|
||||
title: "Shopping List Labels",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue