Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-05 21:45:25 +02:00
Code Issues Releases Activity

Feature/shopping lists second try (#927)

Browse source 
* 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 2022-01-16 15:24:24 -09:00 • committed by GitHub
parent f794208862
commit 92cf97e401
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
66 changed files with 2556 additions and 685 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/api/class-interfaces/group-multiple-purpose-labels.ts
View file

@ -1,4 +1,5 @@
import { BaseCRUDAPI } from "../_base";
import { MultiPurposeLabelCreate, MultiPurposeLabelOut } from "~/types/api-types/labels";
const prefix = "/api";
@ -7,16 +8,7 @@ const routes = {
labelsId: (id: string | number) => `${prefix}/groups/labels/${id}`,
};
export interface CreateLabel {
name: string;
}
export interface Label extends CreateLabel {
id: string;
groupId: string;
}
export class MultiPurposeLabelsApi extends BaseCRUDAPI<Label, CreateLabel> {
export class MultiPurposeLabelsApi extends BaseCRUDAPI<MultiPurposeLabelOut, MultiPurposeLabelCreate> {
baseRoute = routes.labels;
itemRoute = routes.labelsId;
}

69
frontend/api/class-interfaces/group-shopping-lists.ts
View file

@ -1,6 +1,11 @@
import { BaseCRUDAPI } from "../_base";
import { ApiRequestInstance } from "~/types/api";
import { IngredientFood, IngredientUnit } from "~/types/api-types/recipe";
import {
ShoppingListCreate,
ShoppingListItemCreate,
ShoppingListItemOut,
ShoppingListOut,
} from "~/types/api-types/group";
const prefix = "/api";
@ -8,53 +13,49 @@ const routes = {
shoppingLists: `${prefix}/groups/shopping/lists`,
shoppingListsId: (id: string) => `${prefix}/groups/shopping/lists/${id}`,
shoppingListIdAddRecipe: (id: string, recipeId: number) => `${prefix}/groups/shopping/lists/${id}/recipe/${recipeId}`,
shoppingListItems: `${prefix}/groups/shopping/items`,
shoppingListItemsId: (id: string) => `${prefix}/groups/shopping/items/${id}`,
};
export interface ShoppingListItemCreate {
id: string;
shoppingListId: string;
checked: boolean;
position: number;
note: string;
quantity: number;
isFood: boolean;
unit: IngredientUnit | null;
food: IngredientFood | null;
labelId: string | null;
label?: {
id: string;
name: string;
};
}
export interface ShoppingListCreate {
name: string;
}
export interface ShoppingListSummary extends ShoppingListCreate {
id: string;
groupId: string;
}
export interface ShoppingList extends ShoppingListSummary {
listItems: ShoppingListItemCreate[];
}
export class ShoppingListsApi extends BaseCRUDAPI<ShoppingList, ShoppingListCreate> {
export class ShoppingListsApi extends BaseCRUDAPI<ShoppingListOut, ShoppingListCreate> {
baseRoute = routes.shoppingLists;
itemRoute = routes.shoppingListsId;
async addRecipe(itemId: string, recipeId: number) {
return await this.requests.post(routes.shoppingListIdAddRecipe(itemId, recipeId), {});
}
async removeRecipe(itemId: string, recipeId: number) {
return await this.requests.delete(routes.shoppingListIdAddRecipe(itemId, recipeId));
}
}
export class ShoppingListItemsApi extends BaseCRUDAPI<ShoppingListItemOut, ShoppingListItemCreate> {
baseRoute = routes.shoppingListItems;
itemRoute = routes.shoppingListItemsId;
async updateMany(items: ShoppingListItemOut[]) {
return await this.requests.put(routes.shoppingListItems, items);
}
async deleteMany(items: ShoppingListItemOut[]) {
let query = "?";
items.forEach((item) => {
query += `ids=${item.id}&`;
});
return await this.requests.delete(routes.shoppingListItems + query);
}
}
export class ShoppingApi {
public lists: ShoppingListsApi;
public items: ShoppingListItemsApi;
constructor(requests: ApiRequestInstance) {
this.lists = new ShoppingListsApi(requests);
this.items = new ShoppingListItemsApi(requests);
}
}

8
frontend/assets/main.css
View file

@ -11,6 +11,10 @@
max-width: 800px !important;
}
.md-container {
max-width: 950px !important;
}
.theme--dark.v-application {
background-color: var(--v-background-base, #121212) !important;
}
@ -27,6 +31,10 @@
border-left: 5px solid var(--v-primary-base) !important;
}
.left-warning-border {
border-left: 5px solid var(--v-warning-base) !important;
}
.handle {
cursor: grab;
}

33
frontend/components/Domain/Recipe/RecipeList.vue Normal file
View file

@ -0,0 +1,33 @@
<template>
<v-list>
<v-list-item v-for="recipe in recipes" :key="recipe.id" :to="'/recipe/' + recipe.slug">
<v-list-item-avatar>
<v-icon class="pa-1 primary" dark> {{ $globals.icons.primary }} </v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>
{{ recipe.name }}
</v-list-item-title>
<v-list-item-subtitle>{{ recipe.description }}</v-list-item-subtitle>
</v-list-item-content>
<slot :name="'actions-' + recipe.id" :v-bind="{ item: recipe }"> </slot>
</v-list-item>
</v-list>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api";
import { RecipeSummary } from "~/types/api-types/recipe";
export default defineComponent({
props: {
recipes: {
type: Array as () => RecipeSummary[],
required: true,
},
},
setup() {
return {};
},
});
</script>

56
frontend/components/Domain/ShoppingList/MultiPurposeLabel.vue Normal file
View file

@ -0,0 +1,56 @@
<template>
<v-chip v-bind="$attrs" label :color="label.color || undefined" :text-color="textColor">
{{ label.name }}
</v-chip>
</template>
<script lang="ts">
import { computed, defineComponent } from "@nuxtjs/composition-api";
import { MultiPurposeLabelSummary } from "~/types/api-types/recipe";
export default defineComponent({
props: {
label: {
type: Object as () => MultiPurposeLabelSummary,
required: true,
},
},
setup(props) {
const textColor = computed(() => {
if (!props.label.color) {
return "black";
}
return pickTextColorBasedOnBgColorAdvanced(props.label.color, "white", "black");
});
/*
Function to pick the text color based on the background color.
Based on -> https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
*/
const ACCESSIBILITY_THRESHOLD = 0.179;
function pickTextColorBasedOnBgColorAdvanced(bgColor: string, lightColor: string, darkColor: string) {
const color = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor;
const r = parseInt(color.substring(0, 2), 16); // hexToR
const g = parseInt(color.substring(2, 4), 16); // hexToG
const b = parseInt(color.substring(4, 6), 16); // hexToB
const uicolors = [r / 255, g / 255, b / 255];
const c = uicolors.map((col) => {
if (col <= 0.03928) {
return col / 12.92;
}
return Math.pow((col + 0.055) / 1.055, 2.4);
});
const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
return L > ACCESSIBILITY_THRESHOLD ? darkColor : lightColor;
}
return {
textColor,
};
},
});
</script>

144
frontend/components/Domain/ShoppingList/ShoppingListItem.vue
View file

@ -1,65 +1,64 @@
<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')">
<div v-if="!edit" class="d-flex justify-space-between align-center">
<v-checkbox
v-model="listItem.checked"
color="null"
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 :class="listItem.checked ? 'strike-through' : ''">
{{ displayText }}
</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>
<MultiPurposeLabel v-if="listItem.label" :label="listItem.label" class="ml-auto mt-2" small />
<div style="min-width: 72px">
<v-menu offset-x left min-width="125px">
<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>
<v-btn small class="ml-2 mt-2 handle" icon @click="edit = true">
<v-icon>
{{ $globals.icons.edit }}
</v-icon>
</v-btn>
</div>
</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 v-else class="mb-1 mt-6">
<ShoppingListItemEditor
v-model="listItem"
:labels="labels"
:units="units"
:foods="foods"
@save="save"
@cancel="edit = !edit"
@delete="$emit('delete')"
@toggle-foods="listItem.isFood = !listItem.isFood"
/>
</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";
import ShoppingListItemEditor from "./ShoppingListItemEditor.vue";
import MultiPurposeLabel from "./MultiPurposeLabel.vue";
import { ShoppingListItemCreate } from "~/types/api-types/group";
import { MultiPurposeLabelOut } from "~/types/api-types/labels";
import { IngredientFood, IngredientUnit } from "~/types/api-types/recipe";
import { getDisplayText } from "~/composables/use-display-text";
interface actions {
text: string;
@ -71,24 +70,33 @@ const contextMenu: actions[] = [
text: "Edit",
event: "edit",
},
// {
// text: "Delete",
// event: "delete",
// },
// {
// text: "Move",
// event: "move",
// },
{
text: "Delete",
event: "delete",
},
{
text: "Transfer",
event: "transfer",
},
];
export default defineComponent({
components: { ShoppingListItemEditor, MultiPurposeLabel },
props: {
value: {
type: Object as () => ShoppingListItemCreate,
required: true,
},
labels: {
type: Array as () => Label[],
type: Array as () => MultiPurposeLabelOut[],
required: true,
},
units: {
type: Array as () => IngredientUnit[],
required: true,
},
foods: {
type: Array as () => IngredientFood[],
required: true,
},
},
@ -114,10 +122,6 @@ export default defineComponent({
edit.value = false;
}
function handle(event: string) {
console.log(event);
}
const updatedLabels = computed(() => {
return props.labels.map((label) => {
return {
@ -127,9 +131,13 @@ export default defineComponent({
});
});
const displayText = computed(() =>
getDisplayText(listItem.value.note, listItem.value.quantity, listItem.value.food, listItem.value.unit)
);
return {
displayText,
updatedLabels,
handle,
save,
contextHandler,
edit,
@ -139,3 +147,9 @@ export default defineComponent({
},
});
</script>
<style lang="css">
.strike-through {
text-decoration: line-through !important;
}
</style>

129
frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue Normal file
View file

@ -0,0 +1,129 @@
<template>
<div>
<v-card outlined>
<v-card-text class="pb-3 pt-1">
<div v-if="listItem.isFood" class="d-md-flex align-center mb-2" style="gap: 20px">
<InputLabelType
v-model="listItem.food"
:items="foods"
:item-id.sync="listItem.foodId"
label="Food"
:icon="$globals.icons.foods"
/>
<InputLabelType
v-model="listItem.unit"
:items="units"
:item-id.sync="listItem.unitId"
label="Units"
:icon="$globals.icons.units"
/>
</div>
<div class="d-md-flex align-center" style="gap: 20px">
<v-textarea v-model="listItem.note" hide-details label="Note" rows="1" auto-grow></v-textarea>
</div>
<div class="d-flex align-end" style="gap: 20px">
<div>
<InputQuantity v-model="listItem.quantity" />
</div>
<div style="max-width: 300px" class="mt-3 mr-auto">
<InputLabelType v-model="listItem.label" :items="labels" :item-id.sync="listItem.labelId" label="Label" />
</div>
<v-menu
v-if="listItem.recipeReferences && listItem.recipeReferences.length > 0"
open-on-hover
offset-y
left
top
>
<template #activator="{ on, attrs }">
<v-icon class="mt-auto" icon v-bind="attrs" color="warning" v-on="on">
{{ $globals.icons.alert }}
</v-icon>
</template>
<v-card max-width="350px" class="left-warning-border">
<v-card-text>
This item is linked to one or more recipe. Adjusting the units or foods will yield unexpected results
when adding or removing the recipe from this list.
</v-card-text>
</v-card>
</v-menu>
</div>
</v-card-text>
</v-card>
<v-card-actions class="ma-0 pt-0 pb-1 justify-end">
<BaseButtonGroup
:buttons="[
{
icon: $globals.icons.delete,
text: $t('general.delete'),
event: 'delete',
},
{
icon: $globals.icons.close,
text: $t('general.cancel'),
event: 'cancel',
},
{
icon: $globals.icons.foods,
text: 'Toggle Food',
event: 'toggle-foods',
},
{
icon: $globals.icons.save,
text: $t('general.save'),
event: 'save',
},
]"
@save="$emit('save')"
@cancel="$emit('cancel')"
@delete="$emit('delete')"
@toggle-foods="listItem.isFood = !listItem.isFood"
/>
</v-card-actions>
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from "@nuxtjs/composition-api";
import { ShoppingListItemCreate, ShoppingListItemOut } from "~/types/api-types/group";
import { MultiPurposeLabelOut } from "~/types/api-types/labels";
import { IngredientFood, IngredientUnit } from "~/types/api-types/recipe";
export default defineComponent({
props: {
value: {
type: Object as () => ShoppingListItemCreate | ShoppingListItemOut,
required: true,
},
labels: {
type: Array as () => MultiPurposeLabelOut[],
required: true,
},
units: {
type: Array as () => IngredientUnit[],
required: true,
},
foods: {
type: Array as () => IngredientFood[],
required: true,
},
},
setup(props, context) {
const listItem = computed({
get: () => {
return props.value;
},
set: (val) => {
context.emit("input", val);
},
});
return {
listItem,
};
},
head: {
title: "vbase-nuxt",
},
});
</script>

31
frontend/components/global/ButtonLink.vue Normal file
View file

@ -0,0 +1,31 @@
<template>
<div>
<v-btn outlined class="rounded-xl my-1 mx-1" :to="to">
<v-icon v-if="icon != ''" left>
{{ icon }}
</v-icon>
{{ text }}
</v-btn>
</div>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api";
export default defineComponent({
props: {
to: {
type: String,
required: true,
},
text: {
type: String,
default: "Link",
},
icon: {
type: String,
default: "",
},
},
});
</script>

25
frontend/components/global/DevDumpJson.vue Normal file
View file

@ -0,0 +1,25 @@
<template>
<pre>
{{ prettyJson }}
</pre>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api";
export default defineComponent({
props: {
data: {
type: Object,
required: true,
},
},
setup(props) {
const prettyJson = JSON.stringify(props.data, null, 2);
return {
prettyJson,
};
},
});
</script>

66
frontend/components/global/InputColor.vue Normal file
View file

@ -0,0 +1,66 @@
<template>
<v-text-field v-model="inputVal" label="Color">
<template #prepend>
<v-btn class="elevation-0" small height="30px" width="30px" :color="inputVal || 'grey'" @click="setRandomHex">
<v-icon color="white">
{{ $globals.icons.refreshCircle }}
</v-icon>
</v-btn>
</template>
<template #append>
<v-menu v-model="menu" left nudge-left="30" nudge-top="20" :close-on-content-click="false">
<template #activator="{ on }">
<v-icon v-on="on">
{{ $globals.icons.formatColorFill }}
</v-icon>
</template>
<v-card>
<v-card-text class="pa-0">
<v-color-picker v-model="inputVal" flat hide-inputs show-swatches swatches-max-height="200" />
</v-card-text>
</v-card>
</v-menu>
</template>
</v-text-field>
</template>
<script lang="ts">
import { defineComponent, computed, ref } from "@nuxtjs/composition-api";
export default defineComponent({
props: {
value: {
type: String,
required: true,
},
},
setup(props, context) {
const menu = ref(false);
const inputVal = computed({
get: () => {
return props.value;
},
set: (val) => {
context.emit("input", val);
},
});
function getRandomHex() {
return "#000000".replace(/0/g, function () {
return (~~(Math.random() * 16)).toString(16);
});
}
function setRandomHex() {
inputVal.value = getRandomHex();
}
return {
menu,
setRandomHex,
inputVal,
};
},
});
</script>

87
frontend/components/global/InputLabelType.vue Normal file
View file

@ -0,0 +1,87 @@
<template>
<v-autocomplete
v-model="itemVal"
v-bind="$attrs"
item-text="name"
return-object
:items="items"
:prepend-icon="icon || $globals.icons.tags"
clearable
hide-details
/>
</template>
<script lang="ts">
/**
* The InputLabelType component is a wrapper for v-autocomplete. It is used to abstract the selection functionality
* of some common types within Mealie. This can mostly be used with any type of object provided it has a name and id
* property. The name property is used to display the name of the object in the autocomplete dropdown. The id property
* is used to store the id of the object in the itemId property.
*
* Supported Types
* - MultiPurposeLabel
* - RecipeIngredientFood
* - RecipeIngredientUnit
*
* TODO: Add RecipeTag / Category to this selector
* Future Supported Types
* - RecipeTags
* - RecipeCategories
*
* Both the ID and Item can be synced. The item can be synced using the v-model syntax and the itemId can be synced
* using the .sync syntax `item-id.sync="item.labelId"`
*/
import { defineComponent, computed } from "@nuxtjs/composition-api";
import { MultiPurposeLabelSummary } from "~/types/api-types/labels";
import { IngredientFood, IngredientUnit } from "~/types/api-types/recipe";
export default defineComponent({
props: {
value: {
type: Object as () => MultiPurposeLabelSummary | IngredientFood | IngredientUnit,
required: false,
default: () => {
return {};
},
},
items: {
type: Array as () => Array<MultiPurposeLabelSummary | IngredientFood | IngredientUnit>,
required: true,
},
itemId: {
type: [String, Number],
default: undefined,
},
icon: {
type: String,
required: false,
default: undefined,
},
},
setup(props, context) {
const itemIdVal = computed({
get: () => {
return props.itemId || undefined;
},
set: (val) => {
context.emit("update:item-id", val);
},
});
const itemVal = computed({
get: () => {
return props.value;
},
set: (val) => {
itemIdVal.value = val?.id || undefined;
context.emit("input", val);
},
});
return {
itemVal,
itemIdVal,
};
},
});
</script>

64
frontend/components/global/InputQuantity.vue Normal file
View file

@ -0,0 +1,64 @@
<template>
<div class="d-flex align-center" style="max-width: 60px">
<v-text-field
v-model.number="quantity"
hide-details
label="Qty"
:min="min"
:max="max"
type="number"
class="rounded-xl"
small
text
>
</v-text-field>
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from "@nuxtjs/composition-api";
export default defineComponent({
name: "VInputNumber",
props: {
label: {
type: String,
default: "Qty",
},
min: {
type: Number,
default: 0,
},
max: {
type: Number,
default: 9999,
},
rules: {
type: Array,
default: () => [],
},
step: {
type: Number,
default: 1,
},
value: {
type: Number,
default: 0,
},
},
setup(props, context) {
const quantity = computed({
get: () => {
return Number(props.value);
},
set: (val) => {
context.emit("input", val);
},
});
return {
quantity,
};
},
});
</script>

14
frontend/composables/recipes/use-recipe-foods.ts
View file

@ -1,10 +1,10 @@
import { useAsync, ref, reactive, Ref } from "@nuxtjs/composition-api";
import { useAsyncKey } from "../use-utils";
import { useUserApi } from "~/composables/api";
import { Food } from "~/api/class-interfaces/recipe-foods";
import { VForm} from "~/types/vuetify";
import { VForm } from "~/types/vuetify";
import { IngredientFood } from "~/types/api-types/recipe";
let foodStore: Ref<Food[] | null> | null = null;
let foodStore: Ref<IngredientFood[] | null> | null = null;
export const useFoods = function () {
const api = useUserApi();
@ -16,6 +16,7 @@ export const useFoods = function () {
id: 0,
name: "",
description: "",
labelId: "",
});
const actions = {
@ -64,6 +65,7 @@ export const useFoods = function () {
}
loading.value = true;
console.log(workingFoodData);
const { data } = await api.foods.updateOne(workingFoodData.id, workingFoodData);
if (data && foodStore?.value) {
this.refreshAll();
@ -81,11 +83,13 @@ export const useFoods = function () {
workingFoodData.id = 0;
workingFoodData.name = "";
workingFoodData.description = "";
workingFoodData.labelId = "";
},
setWorking(item: Food) {
setWorking(item: IngredientFood) {
workingFoodData.id = item.id;
workingFoodData.name = item.name;
workingFoodData.description = item.description;
workingFoodData.description = item.description || "";
workingFoodData.labelId = item.labelId || "";
},
flushStore() {
foodStore = null;

49
frontend/composables/use-copy.ts Normal file
View file

@ -0,0 +1,49 @@
import { useClipboard } from "@vueuse/core";
import { alert } from "./use-toast";
export function useCopyList() {
const { copy, isSupported } = useClipboard();
function checkClipboard() {
if (!isSupported) {
alert.error("Your browser does not support clipboard");
return false;
}
return true;
}
function copyPlain(list: string[]) {
if (!checkClipboard()) return;
const text = list.join("\n");
copyText(text, list.length);
}
function copyMarkdown(list: string[]) {
if (!checkClipboard()) return;
const text = list.map((item) => `- ${item}`).join("\n");
copyText(text, list.length);
}
function copyMarkdownCheckList(list: string[]) {
if (!checkClipboard()) return;
const text = list.map((item) => `- [ ] ${item}`).join("\n");
copyText(text, list.length);
}
function copyText(text: string, len: number) {
copy(text).then(() => {
alert.success(`Copied ${len} items to clipboard`);
});
}
return {
copyPlain,
copyMarkdown,
copyMarkdownCheckList,
};
}

39
frontend/composables/use-display-text.ts Normal file
View file

@ -0,0 +1,39 @@
/**
* use-display-text module contains helpful utility functions to compute the display text when provided
* with the food, units, quantity, and notes.
*/
import { IngredientFood, IngredientUnit } from "~/types/api-types/recipe";
export function getDisplayText(
notes = "",
quantity: number | null = null,
food: IngredientFood | null = null,
unit: IngredientUnit | null = null
): string {
// Fallback to note only if no food or unit is provided
if (food === null && unit === null) {
return `${quantity || ""} ${notes}`.trim();
}
// Otherwise build the display text
let displayText = "";
if (quantity) {
displayText += quantity;
}
if (unit) {
displayText += ` ${unit.name}`;
}
if (food) {
displayText += ` ${food.name}`;
}
if (notes) {
displayText += ` ${notes}`;
}
return displayText.trim();
}

2
frontend/package.json
View file

@ -25,7 +25,7 @@
"@vueuse/core": "^6.8.0",
"core-js": "^3.15.1",
"date-fns": "^2.23.0",
"fuse.js": "^6.4.6",
"fuse.js": "^6.5.3",
"nuxt": "^2.15.8",
"v-jsoneditor": "^1.4.5",
"vuedraggable": "^2.24.3",

29
frontend/pages/admin/toolbox/foods.vue
View file

@ -15,6 +15,14 @@
<v-form ref="domCreateFoodForm">
<v-text-field v-model="workingFoodData.name" label="Name" :rules="[validators.required]"></v-text-field>
<v-text-field v-model="workingFoodData.description" label="Description"></v-text-field>
<v-autocomplete
v-model="workingFoodData.labelId"
clearable
:items="allLabels"
item-value="id"
item-text="name"
>
</v-autocomplete>
</v-form>
</v-card-text>
</BaseDialog>
@ -50,6 +58,11 @@
</v-expand-transition>
<v-data-table :headers="headers" :items="foods || []" item-key="id" class="elevation-0" :search="search">
<template #item.label="{ item }">
<v-chip v-if="item.label" label>
{{ item.label.name }}
</v-chip>
</template>
<template #item.actions="{ item }">
<div class="d-flex justify-end">
<BaseButton
@ -79,8 +92,10 @@
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, computed } from "@nuxtjs/composition-api";
import { useUserApi } from "~/composables/api";
import { useFoods } from "~/composables/recipes";
import { validators } from "~/composables/use-validators";
import { MultiPurposeLabelSummary } from "~/types/api-types/labels";
export default defineComponent({
layout: "admin",
setup() {
@ -111,6 +126,7 @@ export default defineComponent({
{ text: "Id", value: "id" },
{ text: "Name", value: "name" },
{ text: "Description", value: "description" },
{ text: "Label", value: "label" },
{ text: "", value: "actions", sortable: false },
],
filter: false,
@ -118,7 +134,20 @@ export default defineComponent({
search: "",
});
const userApi = useUserApi();
const allLabels = ref([] as MultiPurposeLabelSummary[]);
async function refreshLabels() {
const { data } = await userApi.multiPurposeLabels.getAll();
allLabels.value = data ?? [];
}
refreshLabels();
return {
allLabels,
refreshLabels,
...toRefs(state),
actions,
dialog,

605
frontend/pages/shopping-lists/_id.vue
View file

@ -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>

3
frontend/pages/shopping-lists/index.vue
View file

@ -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
View 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>

11
frontend/types/api-types/admin.ts
View file

@ -49,6 +49,7 @@ export interface CheckAppConfig {
emailReady?: boolean;
ldapReady?: boolean;
baseUrlSet?: boolean;
isUpToDate?: boolean;
}
export interface ChowdownURL {
url: string;
@ -141,11 +142,21 @@ export interface CreateIngredientUnit {
export interface IngredientFood {
name: string;
description?: string;
labelId?: string;
label?: MultiPurposeLabelSummary;
id: number;
}
export interface MultiPurposeLabelSummary {
name: string;
color?: string;
groupId: string;
id: string;
}
export interface CreateIngredientFood {
name: string;
description?: string;
labelId?: string;
label?: MultiPurposeLabelSummary;
}
export interface RecipeStep {
id?: string;

15
frontend/types/api-types/cookbook.ts
View file

@ -23,8 +23,8 @@ export interface ReadCookBook {
slug?: string;
position?: number;
categories?: CategoryBase[];
id: number;
groupId: string;
id: number;
}
export interface RecipeCategoryResponse {
name: string;
@ -98,11 +98,21 @@ export interface CreateIngredientUnit {
export interface IngredientFood {
name: string;
description?: string;
labelId?: string;
label?: MultiPurposeLabelSummary;
id: number;
}
export interface MultiPurposeLabelSummary {
name: string;
color?: string;
groupId: string;
id: string;
}
export interface CreateIngredientFood {
name: string;
description?: string;
labelId?: string;
label?: MultiPurposeLabelSummary;
}
export interface RecipeStep {
id?: string;
@ -163,8 +173,8 @@ export interface RecipeCookBook {
slug?: string;
position?: number;
categories: RecipeCategoryResponse[];
id: number;
groupId: string;
id: number;
}
export interface SaveCookBook {
name: string;
@ -180,5 +190,6 @@ export interface UpdateCookBook {
slug?: string;
position?: number;
categories?: CategoryBase[];
groupId: string;
id: number;
}

36
frontend/types/api-types/events.ts
View file

@ -6,13 +6,7 @@
*/
export type EventCategory = "general" | "recipe" | "backup" | "scheduled" | "migration" | "group" | "user";
export type DeclaredTypes = "General" | "Discord" | "Gotify" | "Pushover" | "Home Assistant";
export type GotifyPriority = "low" | "moderate" | "normal" | "high";
export interface Discord {
webhookId: string;
webhookToken: string;
}
export interface Event {
id?: number;
title: string;
@ -20,40 +14,10 @@ export interface Event {
timeStamp?: string;
category?: EventCategory & string;
}
export interface EventNotificationIn {
id?: number;
name?: string;
type?: DeclaredTypes & string;
general?: boolean;
recipe?: boolean;
backup?: boolean;
scheduled?: boolean;
migration?: boolean;
group?: boolean;
user?: boolean;
notificationUrl?: string;
}
export interface EventNotificationOut {
id?: number;
name?: string;
type?: DeclaredTypes & string;
general?: boolean;
recipe?: boolean;
backup?: boolean;
scheduled?: boolean;
migration?: boolean;
group?: boolean;
user?: boolean;
}
export interface EventsOut {
total: number;
events: Event[];
}
export interface Gotify {
hostname: string;
token: string;
priority?: GotifyPriority & string;
}
export interface TestEvent {
id?: number;
testUrl?: string;

118
frontend/types/api-types/group.ts
View file

@ -179,8 +179,16 @@ export interface GroupEventNotifierUpdate {
export interface IngredientFood {
name: string;
description?: string;
labelId?: string;
label?: MultiPurposeLabelSummary;
id: number;
}
export interface MultiPurposeLabelSummary {
name: string;
color?: string;
groupId: string;
id: string;
}
export interface IngredientUnit {
name: string;
description?: string;
@ -188,11 +196,6 @@ export interface IngredientUnit {
abbreviation?: string;
id: number;
}
export interface MultiPurposeLabelSummary {
name: string;
groupId: string;
id: string;
}
export interface ReadGroupPreferences {
privateGroup?: boolean;
firstDayOfWeek?: number;
@ -218,6 +221,59 @@ export interface ReadWebhook {
groupId: string;
id: number;
}
export interface RecipeSummary {
id?: number;
userId?: string;
groupId?: string;
name?: string;
slug?: string;
image?: unknown;
recipeYield?: string;
totalTime?: string;
prepTime?: string;
cookTime?: string;
performTime?: string;
description?: string;
recipeCategory?: RecipeTag[];
tags?: RecipeTag[];
tools?: RecipeTool[];
rating?: number;
orgURL?: string;
recipeIngredient?: RecipeIngredient[];
dateAdded?: string;
dateUpdated?: string;
}
export interface RecipeTag {
name: string;
slug: string;
}
export interface RecipeTool {
name: string;
slug: string;
id?: number;
onHand?: boolean;
}
export interface RecipeIngredient {
title?: string;
note?: string;
unit?: IngredientUnit | CreateIngredientUnit;
food?: IngredientFood | CreateIngredientFood;
disableAmount?: boolean;
quantity?: number;
referenceId?: string;
}
export interface CreateIngredientUnit {
name: string;
description?: string;
fraction?: boolean;
abbreviation?: string;
}
export interface CreateIngredientFood {
name: string;
description?: string;
labelId?: string;
label?: MultiPurposeLabelSummary;
}
export interface SaveInviteToken {
usesLeft: number;
groupId: string;
@ -236,9 +292,6 @@ export interface SetPermissions {
canInvite?: boolean;
canOrganize?: boolean;
}
/**
* Create Shopping List
*/
export interface ShoppingListCreate {
name?: string;
}
@ -253,8 +306,12 @@ export interface ShoppingListItemCreate {
unit?: IngredientUnit;
foodId?: number;
food?: IngredientFood;
recipeId?: number;
labelId?: string;
recipeReferences?: ShoppingListItemRecipeRef[];
}
export interface ShoppingListItemRecipeRef {
recipeId: number;
recipeQuantity: number;
}
export interface ShoppingListItemOut {
shoppingListId: string;
@ -267,38 +324,55 @@ export interface ShoppingListItemOut {
unit?: IngredientUnit;
foodId?: number;
food?: IngredientFood;
recipeId?: number;
labelId?: string;
recipeReferences?: ShoppingListItemRecipeRefOut[];
id: string;
label?: MultiPurposeLabelSummary;
}
/**
* Create Shopping List
*/
export interface ShoppingListItemRecipeRefOut {
recipeId: number;
recipeQuantity: number;
id: string;
shoppingListItemId: string;
}
export interface ShoppingListItemUpdate {
shoppingListId: string;
checked?: boolean;
position?: number;
isFood?: boolean;
note?: string;
quantity?: number;
unitId?: number;
unit?: IngredientUnit;
foodId?: number;
food?: IngredientFood;
labelId?: string;
recipeReferences?: ShoppingListItemRecipeRef[];
id: string;
}
export interface ShoppingListOut {
name?: string;
groupId: string;
id: string;
listItems?: ShoppingListItemOut[];
recipeReferences: ShoppingListRecipeRefOut[];
}
export interface ShoppingListRecipeRefOut {
id: string;
shoppingListId: string;
recipeId: number;
recipeQuantity: number;
recipe: RecipeSummary;
}
/**
* Create Shopping List
*/
export interface ShoppingListSave {
name?: string;
groupId: string;
}
/**
* Create Shopping List
*/
export interface ShoppingListSummary {
name?: string;
groupId: string;
id: string;
}
/**
* Create Shopping List
*/
export interface ShoppingListUpdate {
name?: string;
groupId: string;

47
frontend/types/api-types/labels.ts
View file

@ -5,55 +5,30 @@
/* Do not modify it by hand - just update the pydantic models and then re-run the script
*/
export interface IngredientFood {
name: string;
description?: string;
id: number;
}
export interface MultiPurposeLabelCreate {
name: string;
color?: string;
}
export interface MultiPurposeLabelOut {
name: string;
groupId: string;
id: string;
shoppingListItems?: ShoppingListItemOut[];
foods?: IngredientFood[];
}
export interface ShoppingListItemOut {
shoppingListId: string;
checked?: boolean;
position?: number;
isFood?: boolean;
note?: string;
quantity?: number;
unitId?: number;
unit?: IngredientUnit;
foodId?: number;
food?: IngredientFood;
recipeId?: number;
labelId?: string;
id: string;
label?: MultiPurposeLabelSummary;
}
export interface IngredientUnit {
name: string;
description?: string;
fraction?: boolean;
abbreviation?: string;
id: number;
}
export interface MultiPurposeLabelSummary {
name: string;
color?: string;
groupId: string;
id: string;
}
export interface MultiPurposeLabelSave {
name: string;
color?: string;
groupId: string;
}
export interface MultiPurposeLabelUpdate {
export interface MultiPurposeLabelSummary {
name: string;
color?: string;
groupId: string;
id: string;
}
export interface MultiPurposeLabelUpdate {
name: string;
color?: string;
groupId: string;
id: string;
}

10
frontend/types/api-types/meal-plan.ts
View file

@ -115,11 +115,21 @@ export interface CreateIngredientUnit {
export interface IngredientFood {
name: string;
description?: string;
labelId?: string;
label?: MultiPurposeLabelSummary;
id: number;
}
export interface MultiPurposeLabelSummary {
name: string;
color?: string;
groupId: string;
id: string;
}
export interface CreateIngredientFood {
name: string;
description?: string;
labelId?: string;
label?: MultiPurposeLabelSummary;
}
export interface SavePlanEntry {
date: string;

17
frontend/types/api-types/recipe.ts
View file

@ -41,6 +41,14 @@ export interface CategoryIn {
export interface CreateIngredientFood {
name: string;
description?: string;
labelId?: string;
label?: MultiPurposeLabelSummary;
}
export interface MultiPurposeLabelSummary {
name: string;
color?: string;
groupId: string;
id: string;
}
export interface CreateIngredientUnit {
name: string;
@ -73,6 +81,9 @@ export interface CreateRecipeByUrlBulk {
export interface DeleteRecipes {
recipes: string[];
}
export interface ExportBase {
recipes: string[];
}
export interface ExportRecipes {
recipes: string[];
exportType?: ExportTypes & string;
@ -88,6 +99,8 @@ export interface IngredientConfidence {
export interface IngredientFood {
name: string;
description?: string;
labelId?: string;
label?: MultiPurposeLabelSummary;
id: number;
}
/**
@ -304,3 +317,7 @@ export interface SlugResponse {}
export interface TagIn {
name: string;
}
export interface UnitFoodBase {
name: string;
description?: string;
}

4
frontend/types/api-types/response.ts
View file

@ -10,3 +10,7 @@ export interface ErrorResponse {
error?: boolean;
exception?: string;
}
export interface SuccessResponse {
message: string;
error?: boolean;
}

8
frontend/types/api-types/static.ts Normal file
View file

@ -0,0 +1,8 @@
/* tslint:disable */
/* eslint-disable */
/**
/* This file was automatically generated from pydantic models by running pydantic2ts.
/* Do not modify it by hand - just update the pydantic models and then re-run the script
*/
export interface _Master_ {}

10
frontend/types/api-types/user.ts
View file

@ -165,11 +165,21 @@ export interface CreateIngredientUnit {
export interface IngredientFood {
name: string;
description?: string;
labelId?: string;
label?: MultiPurposeLabelSummary;
id: number;
}
export interface MultiPurposeLabelSummary {
name: string;
color?: string;
groupId: string;
id: string;
}
export interface CreateIngredientFood {
name: string;
description?: string;
labelId?: string;
label?: MultiPurposeLabelSummary;
}
export interface ResetPassword {
token: string;

10
frontend/types/components.d.ts vendored
View file

@ -10,13 +10,18 @@
import BannerExperimental from "@/components/global/BannerExperimental.vue";
import BaseDialog from "@/components/global/BaseDialog.vue";
import RecipeJsonEditor from "@/components/global/RecipeJsonEditor.vue";
import InputLabelType from "@/components/global/InputLabelType.vue";
import BaseStatCard from "@/components/global/BaseStatCard.vue";
import DevDumpJson from "@/components/global/DevDumpJson.vue";
import InputQuantity from "@/components/global/InputQuantity.vue";
import ToggleState from "@/components/global/ToggleState.vue";
import AppButtonCopy from "@/components/global/AppButtonCopy.vue";
import InputColor from "@/components/global/InputColor.vue";
import BaseDivider from "@/components/global/BaseDivider.vue";
import AutoForm from "@/components/global/AutoForm.vue";
import AppButtonUpload from "@/components/global/AppButtonUpload.vue";
import BasePageTitle from "@/components/global/BasePageTitle.vue";
import ButtonLink from "@/components/global/ButtonLink.vue";
import TheSnackbar from "@/components/layout/TheSnackbar.vue";
import AppHeader from "@/components/layout/AppHeader.vue";
@ -38,13 +43,18 @@ declare module "vue" {
BannerExperimental: typeof BannerExperimental;
BaseDialog: typeof BaseDialog;
RecipeJsonEditor: typeof RecipeJsonEditor;
InputLabelType: typeof InputLabelType;
BaseStatCard: typeof BaseStatCard;
DevDumpJson: typeof DevDumpJson;
InputQuantity: typeof InputQuantity;
ToggleState: typeof ToggleState;
AppButtonCopy: typeof AppButtonCopy;
InputColor: typeof InputColor;
BaseDivider: typeof BaseDivider;
AutoForm: typeof AutoForm;
AppButtonUpload: typeof AppButtonUpload;
BasePageTitle: typeof BasePageTitle;
ButtonLink: typeof ButtonLink;
// Layout Components
TheSnackbar: typeof TheSnackbar;
AppHeader: typeof AppHeader;

8
frontend/yarn.lock
View file

@ -5776,10 +5776,10 @@ functional-red-black-tree@^1.0.1:
resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
fuse.js@^6.4.6:
version "6.4.6"
resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.4.6.tgz#62f216c110e5aa22486aff20be7896d19a059b79"
integrity sha512-/gYxR/0VpXmWSfZOIPS3rWwU8SHgsRTwWuXhyb2O6s7aRuVtHtxCkR33bNYu3wyLyNx/Wpv0vU7FZy8Vj53VNw==
fuse.js@^6.5.3:
version "6.5.3"
resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.5.3.tgz#7446c0acbc4ab0ab36fa602e97499bdb69452b93"
integrity sha512-sA5etGE7yD/pOqivZRBvUBd/NaL2sjAu6QuSaFoe1H2BrJSkH/T/UXAJ8CdXdw7DvY3Hs8CXKYkDWX7RiP5KOg==
gensync@^1.0.0-beta.2:
version "1.0.0-beta.2"