mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-25 08:09:41 +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,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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue