Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-27 17:19:40 +02:00
Code Issues Releases Activity

feat: Improve Shopping List UI (#4608)

Browse source 
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
miah 2025-02-24 02:41:04 -06:00 • committed by GitHub
parent 6271b33b1b
commit a41f8b31f1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 54 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

66
frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue
View file

@ -34,6 +34,7 @@
:label="$t('shopping-list.note')" :label="$t('shopping-list.note')"
rows="1" rows="1"
auto-grow auto-grow
autofocus
@keypress="handleNoteKeyPress" @keypress="handleNoteKeyPress"
></v-textarea> ></v-textarea>
</div> </div>
@ -80,37 +81,37 @@
<v-spacer /> <v-spacer />
</div> </div>
</v-card-text> </v-card-text>
<v-card-actions class="ma-0 pt-0 pb-1 justify-end">
<BaseButtonGroup
:buttons="[
...(allowDelete ? [{
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: $t('shopping-list.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>
</v-card> </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: $t('shopping-list.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> </div>
</template> </template>
@ -139,6 +140,11 @@ export default defineComponent({
type: Array as () => IngredientFood[], type: Array as () => IngredientFood[],
required: true, required: true,
}, },
allowDelete: {
type: Boolean,
required: false,
default: true,
},
}, },
setup(props, context) { setup(props, context) {
const foodStore = useFoodStore(); const foodStore = useFoodStore();

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

@ -151,6 +151,24 @@
</div> </div>
</div> </div>
<!-- Create Item -->
<div v-if="createEditorOpen">
<ShoppingListItemEditor
v-model="createListItemData"
class="my-4"
:labels="allLabels || []"
:units="allUnits || []"
:foods="allFoods || []"
:allow-delete="false"
@delete="createEditorOpen = false"
@cancel="createEditorOpen = false"
@save="createListItem"
/>
</div>
<div v-else class="d-flex justify-end">
<BaseButton create @click="createEditorOpen = true" > {{ $t('general.add') }} </BaseButton>
</div>
<!-- Reorder Labels --> <!-- Reorder Labels -->
<BaseDialog <BaseDialog
v-model="reorderLabelsDialog" v-model="reorderLabelsDialog"
@ -177,23 +195,6 @@
</v-card> </v-card>
</BaseDialog> </BaseDialog>
<!-- 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" > {{ $t('general.add') }} </BaseButton>
</div>
<!-- Checked Items --> <!-- Checked Items -->
<div v-if="listItems.checked && listItems.checked.length > 0" class="mt-6"> <div v-if="listItems.checked && listItems.checked.length > 0" class="mt-6">
<div class="d-flex"> <div class="d-flex">