mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-05 13:35:23 +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:
parent
f794208862
commit
92cf97e401
66 changed files with 2556 additions and 685 deletions
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue