cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

shopping list ux optimization, left handed mode

Browse Source
This commit is contained in:
Kaibu
2022-01-21 00:13:36 +01:00
parent 0cf0fcea0a
commit c90e5d72af
11 changed files with 333 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
cookbook/migrations/0167_userpreference_left_handed.py Normal file
View File

@ -0,0 +1,18 @@
# Generated by Django 3.2.11 on 2022-01-20 22:31
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('cookbook', '0166_alter_userpreference_shopping_add_onhand'),
]
operations = [
migrations.AddField(
model_name='userpreference',
name='left_handed',
field=models.BooleanField(default=False),
),
]

1
cookbook/models.py
View File

@ -339,6 +339,7 @@ class UserPreference(models.Model, PermissionModelMixin):
mealplan_autoinclude_related = models.BooleanField(default=True) mealplan_autoinclude_related = models.BooleanField(default=True)
shopping_add_onhand = models.BooleanField(default=False) shopping_add_onhand = models.BooleanField(default=False)
filter_to_supermarket = models.BooleanField(default=False) filter_to_supermarket = models.BooleanField(default=False)
left_handed = models.BooleanField(default=False)
default_delay = models.DecimalField(default=4, max_digits=8, decimal_places=4) default_delay = models.DecimalField(default=4, max_digits=8, decimal_places=4)
shopping_recent_days = models.PositiveIntegerField(default=7) shopping_recent_days = models.PositiveIntegerField(default=7)
csv_delim = models.CharField(max_length=2, default=",") csv_delim = models.CharField(max_length=2, default=",")

2
cookbook/serializer.py
View File

@ -183,7 +183,7 @@ class UserPreferenceSerializer(WritableNestedModelSerializer):
'user', 'theme', 'nav_color', 'default_unit', 'default_page', 'use_kj', 'search_style', 'show_recent', 'plan_share', 'user', 'theme', 'nav_color', 'default_unit', 'default_page', 'use_kj', 'search_style', 'show_recent', 'plan_share',
'ingredient_decimals', 'comments', 'shopping_auto_sync', 'mealplan_autoadd_shopping', 'food_inherit_default', 'default_delay', 'ingredient_decimals', 'comments', 'shopping_auto_sync', 'mealplan_autoadd_shopping', 'food_inherit_default', 'default_delay',
'mealplan_autoinclude_related', 'mealplan_autoexclude_onhand', 'shopping_share', 'shopping_recent_days', 'csv_delim', 'csv_prefix', 'mealplan_autoinclude_related', 'mealplan_autoexclude_onhand', 'shopping_share', 'shopping_recent_days', 'csv_delim', 'csv_prefix',
'filter_to_supermarket', 'shopping_add_onhand' 'filter_to_supermarket', 'shopping_add_onhand', 'left_handed'
) )

5
cookbook/static/themes/tandoor.min.css vendored
View File

@ -10461,4 +10461,9 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
.form-control-search { .form-control-search {
font-size: 20px; font-size: 20px;
}
.ghost {
opacity: 0.5 !important;
background: #b98766 !important;
} }

18
vue/src/apps/MealPlanView/MealPlanView.vue
View File

@ -79,21 +79,20 @@
<div class="col-12 col-md-9 col-lg-6"> <div class="col-12 col-md-9 col-lg-6">
<h5>{{ $t("Meal_Types") }}</h5> <h5>{{ $t("Meal_Types") }}</h5>
<div> <div>
<draggable :list="meal_types" group="meal_types" :empty-insert-threshold="10" <draggable :list="meal_types" group="meal_types" :empty-insert-threshold="10" @sort="sortMealTypes()" ghost-class="ghost">
handle=".handle" @sort="sortMealTypes()"> <b-card no-body class="mt-1 list-group-item p-2" style="cursor:move" v-for="(meal_type, index) in meal_types" v-hover
<b-card no-body class="mt-1" v-for="(meal_type, index) in meal_types" v-hover
:key="meal_type.id"> :key="meal_type.id">
<b-card-header class="p-4"> <b-card-header class="p-2 border-0">
<div class="row"> <div class="row">
<div class="col-2 handle"> <div class="col-2">
<button type="button" class="btn btn-lg shadow-none"><i <button type="button" class="btn btn-lg shadow-none"><i
class="fas fa-arrows-alt-v"></i></button> class="fas fa-arrows-alt-v"></i></button>
</div> </div>
<div class="col-10"> <div class="col-10">
<h5> <h5 class="mt-1 mb-1">
{{ meal_type.icon }} {{ {{ meal_type.icon }} {{
meal_type.name meal_type.name
}}<span class="float-right text-primary" }}<span class="float-right text-primary" style="cursor:pointer"
><i class="fa" ><i class="fa"
v-bind:class="{ 'fa-pen': !meal_type.editing, 'fa-save': meal_type.editing }" v-bind:class="{ 'fa-pen': !meal_type.editing, 'fa-save': meal_type.editing }"
@click="editOrSaveMealType(index)" aria-hidden="true"></i @click="editOrSaveMealType(index)" aria-hidden="true"></i
@ -878,4 +877,9 @@ having to override as much.
.theme-default .cv-day.draghover { .theme-default .cv-day.draghover {
box-shadow: inset 0 0 0.2em 0.2em yellow; box-shadow: inset 0 0 0.2em 0.2em yellow;
} }
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
</style> </style>

226
vue/src/apps/ShoppingListView/ShoppingListView.vue
View File

@ -5,10 +5,10 @@
<div class="col-auto no-gutter ml-auto"> <div class="col-auto no-gutter ml-auto">
<b-button variant="link" class="px-1 pt-0 pb-1 d-none d-md-inline-block"> <b-button variant="link" class="px-1 pt-0 pb-1 d-none d-md-inline-block">
<i class="btn fas fa-plus-circle fa-lg px-0" @click="entrymode = !entrymode" <i class="btn fas fa-plus-circle fa-lg px-0" @click="entrymode = !entrymode"
:class="entrymode ? 'text-success' : 'text-muted'"/> :class="entrymode ? 'text-success' : 'text-primary'"/>
</b-button> </b-button>
<b-button variant="link" class="px-1 pt-0 pb-1 d-none d-md-inline-block"> <b-button variant="link" class="px-1 pt-0 pb-1 d-none d-md-inline-block">
<i class="fas fa-download fa-lg nav-link dropdown-toggle text-muted px-1" id="downloadShoppingLink" <i class="fas fa-download fa-lg nav-link dropdown-toggle text-primary px-1" id="downloadShoppingLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="downloadShoppingLink"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="downloadShoppingLink">
@ -23,7 +23,7 @@
</b-button> </b-button>
<b-button variant="link" id="id_filters_button" class="px-1 pt-0 pb-1"> <b-button variant="link" id="id_filters_button" class="px-1 pt-0 pb-1">
<i class="btn fas fa-filter text-decoration-none fa-lg px-1" <i class="btn fas fa-filter text-decoration-none fa-lg px-1"
:class="filterApplied ? 'text-danger' : 'text-muted'"/> :class="filterApplied ? 'text-danger' : 'text-primary'"/>
</b-button> </b-button>
</div> </div>
</div> </div>
@ -93,8 +93,9 @@
<!-- shopping list table --> <!-- shopping list table -->
<div v-if="items && items.length > 0"> <div v-if="items && items.length > 0">
<div v-for="(done, x) in Sections" :key="x"> <div v-for="(done, x) in Sections" :key="x">
<div v-if="x == 'true'"> <div v-if="x == 'true'"
<h4 class="pl-2 pl-md-0">{{ $t("Completed") }}</h4> class="bg-header w-100 text-center d-flex justify-content-center align-items-center">
<span class="h4 d-flex mt-1 mb-1">{{ $t("Completed") }}</span>
</div> </div>
<div v-for="(s, i) in done" :key="i"> <div v-for="(s, i) in done" :key="i">
@ -127,7 +128,7 @@
<transition-group name="slide-fade"> <transition-group name="slide-fade">
<div v-for="(entries, x) in Object.entries(s)" :key="x"> <div v-for="(entries, x) in Object.entries(s)" :key="x">
<transition name="slide-fade" mode="out-in"> <transition name="slide-fade" mode="out-in">
<ShoppingLineItem :entries="entries[1]" :groupby="group_by" <ShoppingLineItem :entries="entries[1]" :groupby="group_by" :settings="settings"
@open-context-menu="openContextMenu" @update-checkbox="updateChecked"/> @open-context-menu="openContextMenu" @update-checkbox="updateChecked"/>
</transition> </transition>
</div> </div>
@ -173,7 +174,7 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<!-- supermarkets column --> <!-- supermarkets column -->
<div class="col col-md-5"> <div class="col col-md-5">
<b-card> <b-card no-body>
<template #header> <template #header>
<h4 class="mb-0">{{ $t("Supermarkets") }} <h4 class="mb-0">{{ $t("Supermarkets") }}
<b-button <b-button
@ -190,12 +191,12 @@
" "
> >
<i class="btn fas fa-plus-circle fa-lg px-0" <i class="btn fas fa-plus-circle fa-lg px-0"
:class="new_supermarket.entrymode ? 'text-success' : 'text-muted'"/> :class="new_supermarket.entrymode ? 'text-success' : 'text-primary'"/>
</b-button> </b-button>
</h4> </h4>
</template> </template>
<b-card <b-card
class="m-1 p-1 no-body" class="pt-5 pl-5 pr-5"
border-variant="success" border-variant="success"
header-bg-variant="success" header-bg-variant="success"
header-text-variant="white" header-text-variant="white"
@ -207,30 +208,33 @@
v-model="new_supermarket.value"/> v-model="new_supermarket.value"/>
<b-input-group-append> <b-input-group-append>
<b-button class="input-group-append" variant="success" @click="addSupermarket"><i <b-button class="input-group-append" variant="success" @click="addSupermarket"><i
class="pr-2 pt-1 fas fa-save"></i> {{ $t("Save") }} class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }}
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</b-input-group> </b-input-group>
</b-card> </b-card>
<b-card-body class="m-0 p-0"> <b-card-body class="m-0 p-0">
<b-card class="no-body mb-2" v-for="s in supermarkets" v-bind:key="s.id"> <b-card class="mt-1 p-0" v-for="s in supermarkets" v-bind:key="s.id">
<b-card-title> <b-card-header class="p-2 border-0 pt-3">
<div class="row"> <div class="row">
<div class="col">{{ s.name }}</div> <div class="col-12">
<div class="col-auto text-right ml-auto"> <h5 class="mt-1 mb-1">
<b-button variant="link" {{ s.name }}
class="p-0 m-0" <b-button variant="link"
@click="s.editmode = !s.editmode;new_category.entrymode = false;new_supermarket.entrymode = false;editSupermarket(s)"> class="p-0 m-0 float-right"
<i class="btn fas fa-edit fa-lg px-0" :class="s.editmode ? 'text-success' : 'text-muted'"/> @click="s.editmode = !s.editmode;new_category.entrymode = false;new_supermarket.entrymode = false;editSupermarket(s)">
</b-button> <i class="btn fas fa-edit fa-lg px-0"
<b-button variant="link" class="p-0 m-0" @click="deleteSupermarket(s)"> :class="s.editmode ? 'text-success' : 'text-primary'"/>
<i class="btn fas fa-trash fa-lg px-2 text-muted"/> </b-button>
</b-button> <b-button variant="link" class="p-0 m-0 float-right" @click="deleteSupermarket(s)">
<i class="btn fas fa-trash fa-lg px-2 text-danger"/>
</b-button>
</h5>
</div> </div>
</div> </div>
</b-card-title> </b-card-header>
<b-card-body class="py-0"> <b-card-body class="m-0 p-0">
<generic-pill :item_list="s.category_to_supermarket" label="category::name" <generic-pill :item_list="s.category_to_supermarket" label="category::name"
color="info"></generic-pill> color="info"></generic-pill>
</b-card-body> </b-card-body>
@ -251,7 +255,7 @@
" "
> >
<i class="btn fas fa-plus-circle fa-lg px-0" <i class="btn fas fa-plus-circle fa-lg px-0"
:class="new_category.entrymode ? 'text-success' : 'text-muted'"/> :class="new_category.entrymode ? 'text-success' : 'text-primary'"/>
</b-button> </b-button>
</h4> </h4>
</template> </template>
@ -269,7 +273,7 @@
v-model="new_category.value"/> v-model="new_category.value"/>
<b-input-group-append> <b-input-group-append>
<b-button class="input-group-append" variant="success" @click="addCategory"><i <b-button class="input-group-append" variant="success" @click="addCategory"><i
class="pr-2 pt-1 fas fa-save"></i> {{ $t("Save") }} class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }}
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</b-input-group> </b-input-group>
@ -292,17 +296,28 @@
v-bind="{ animation: 200, disabled: !new_supermarket.editmode }" v-bind="{ animation: 200, disabled: !new_supermarket.editmode }"
> >
<transition-group type="transition" :name="!drag ? 'flip-list' : null"> <transition-group type="transition" :name="!drag ? 'flip-list' : null">
<b-card <b-card no-body v-hover
class="m-0 p-0 font-weight-bold no-body list-group-item" class="mt-1 list-group-item p-2"
:style="new_supermarket.editmode ? 'cursor:move' : ''" :style="new_supermarket.editmode ? 'cursor:move' : ''"
v-for="c in supermarketCategory" v-for="c in supermarketCategory"
v-bind:key="c.id" v-bind:key="c.id"
:border-variant="new_supermarket.editmode ? 'success' : ''" :border-variant="new_supermarket.editmode ? 'success' : ''">
> <b-card-header class="p-2 border-0">
{{ categoryName(c) }} <div class="row">
<b-button variant="link" class="p-0 m-0 float-right" @click="deleteCategory(c)"> <div class="col-2" v-if="new_supermarket.editmode">
<i class="btn fas fa-trash fa-lg px-2 text-muted"/> <button type="button" class="btn btn-lg shadow-none"><i
</b-button> class="fas fa-arrows-alt-v"></i></button>
</div>
<div :class="new_supermarket.editmode ? 'col-10' : 'col-12'">
<h5 class="mt-1 mb-1">
{{ categoryName(c) }}
<b-button variant="link" class="p-0 m-0 float-right" @click="deleteCategory(c)">
<i class="btn fas fa-trash fa-lg px-2 text-danger"/>
</b-button>
</h5>
</div>
</div>
</b-card-header>
</b-card> </b-card>
</transition-group> </transition-group>
</draggable> </draggable>
@ -313,19 +328,34 @@
class="list-group" class="list-group"
:list="notSupermarketCategory" :list="notSupermarketCategory"
group="category" group="category"
v-if="new_supermarket.editmode"
@start="drag = true" @start="drag = true"
@end="drag = false" @end="drag = false"
ghost-class="ghost" ghost-class="ghost"
v-if="new_supermarket.editmode"
v-bind="{ animation: 200 }" v-bind="{ animation: 200 }"
> >
<transition-group type="transition" :name="!drag ? 'flip-list' : null"> <transition-group type="transition" :name="!drag ? 'flip-list' : null">
<b-card class="m-0 p-0 font-weight-bold no-body list-group-item" style="cursor: move" <b-card no-body v-hover
v-for="c in notSupermarketCategory" v-bind:key="c.id" :border-variant="'danger'"> class="mt-1 list-group-item p-2"
{{ categoryName(c) }} style="cursor: move"
<b-button variant="link" class="p-0 m-0 float-right" @click="deleteCategory(c)"> v-for="c in notSupermarketCategory" v-bind:key="c.id"
<i class="btn fas fa-trash fa-lg px-2 text-muted"/> :border-variant="'danger'">
</b-button> <b-card-header class="p-2 border-0">
<div class="row">
<div class="col-2" v-if="new_supermarket.editmode">
<button type="button" class="btn btn-lg shadow-none"><i
class="fas fa-arrows-alt-v"></i></button>
</div>
<div :class="new_supermarket.editmode ? 'col-10' : 'col-12'">
<h5 class="mt-1 mb-1">
{{ categoryName(c) }}
<b-button variant="link" class="p-0 m-0 float-right" @click="deleteCategory(c)">
<i class="btn fas fa-trash fa-lg px-2 text-primary"/>
</b-button>
</h5>
</div>
</div>
</b-card-header>
</b-card> </b-card>
</transition-group> </transition-group>
</draggable> </draggable>
@ -341,7 +371,7 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("mealplan_autoadd_shopping") }}</div> <div class="col col-md-6">{{ $t("mealplan_autoadd_shopping") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="checkbox" class="form-control-sm" v-model="settings.mealplan_autoadd_shopping" <input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoadd_shopping"
@change="saveSettings"/> @change="saveSettings"/>
</div> </div>
</div> </div>
@ -354,7 +384,7 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("mealplan_autoadd_shopping") }}</div> <div class="col col-md-6">{{ $t("mealplan_autoadd_shopping") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="checkbox" class="form-control-sm" v-model="settings.mealplan_autoexclude_onhand" <input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoexclude_onhand"
@change="saveSettings"/> @change="saveSettings"/>
</div> </div>
</div> </div>
@ -368,7 +398,7 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("mealplan_autoinclude_related") }}</div> <div class="col col-md-6">{{ $t("mealplan_autoinclude_related") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="checkbox" class="form-control-sm" v-model="settings.mealplan_autoinclude_related" <input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoinclude_related"
@change="saveSettings"/> @change="saveSettings"/>
</div> </div>
</div> </div>
@ -404,7 +434,7 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("shopping_auto_sync") }}</div> <div class="col col-md-6">{{ $t("shopping_auto_sync") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="number" class="form-control-sm" v-model="settings.shopping_auto_sync" <input type="number" class="form-control" v-model="settings.shopping_auto_sync"
@change="saveSettings"/> @change="saveSettings"/>
</div> </div>
</div> </div>
@ -418,7 +448,7 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("shopping_add_onhand") }}</div> <div class="col col-md-6">{{ $t("shopping_add_onhand") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="checkbox" class="form-control-sm" v-model="settings.shopping_add_onhand" <input type="checkbox" class="form-control settings-checkbox" v-model="settings.shopping_add_onhand"
@change="saveSettings"/> @change="saveSettings"/>
</div> </div>
</div> </div>
@ -432,11 +462,10 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("shopping_recent_days") }}</div> <div class="col col-md-6">{{ $t("shopping_recent_days") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="number" class="form-control-sm" v-model="settings.shopping_recent_days" <input type="number" class="form-control" v-model="settings.shopping_recent_days"
@change="saveSettings"/> @change="saveSettings"/>
</div> </div>
</div> </div>
<div class="row sm mb-3"> <div class="row sm mb-3">
<div class="col"> <div class="col">
<em class="small text-muted"> <em class="small text-muted">
@ -447,7 +476,8 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("filter_to_supermarket") }}</div> <div class="col col-md-6">{{ $t("filter_to_supermarket") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="checkbox" class="form-control-sm" v-model="settings.filter_to_supermarket" <input type="checkbox" class="form-control settings-checkbox"
v-model="settings.filter_to_supermarket"
@change="saveSettings"/> @change="saveSettings"/>
</div> </div>
</div> </div>
@ -461,7 +491,7 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("default_delay") }}</div> <div class="col col-md-6">{{ $t("default_delay") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="number" class="form-control-sm" min="1" v-model="settings.default_delay" <input type="number" class="form-control" min="1" v-model="settings.default_delay"
@change="saveSettings"/> @change="saveSettings"/>
</div> </div>
</div> </div>
@ -475,7 +505,7 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("csv_delim_label") }}</div> <div class="col col-md-6">{{ $t("csv_delim_label") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input class="form-control-sm" v-model="settings.csv_delim" @change="saveSettings"/> <input class="form-control" v-model="settings.csv_delim" @change="saveSettings"/>
</div> </div>
</div> </div>
<div class="row sm mb-3"> <div class="row sm mb-3">
@ -488,7 +518,7 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("csv_prefix_label") }}</div> <div class="col col-md-6">{{ $t("csv_prefix_label") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input class="form-control-sm" v-model="settings.csv_prefix" @change="saveSettings"/> <input class="form-control" v-model="settings.csv_prefix" @change="saveSettings"/>
</div> </div>
</div> </div>
<div class="row sm mb-3"> <div class="row sm mb-3">
@ -498,6 +528,21 @@
</em> </em>
</div> </div>
</div> </div>
<div class="row">
<div class="col col-md-6">{{ $t("left_handed") }}</div>
<div class="col col-md-6">
<input type="checkbox" class="form-control settings-checkbox"
v-model="settings.left_handed"
@change="saveSettings"/>
</div>
</div>
<div class="row sm mb-3">
<div class="col">
<em class="small text-muted">
{{ $t("left_handed_help") }}
</em>
</div>
</div>
</b-card> </b-card>
</div> </div>
</div> </div>
@ -549,7 +594,6 @@
</b-col> </b-col>
</b-row> </b-row>
</ContextMenuItem> </ContextMenuItem>
<ContextMenuItem @click="$refs.menu.close();onHand(contextData)"> <ContextMenuItem @click="$refs.menu.close();onHand(contextData)">
<a class="dropdown-item p-2" href="#"><i class="fas fa-clipboard-check"></i> {{ $t("OnHand") }}</a> <a class="dropdown-item p-2" href="#"><i class="fas fa-clipboard-check"></i> {{ $t("OnHand") }}</a>
</ContextMenuItem> </ContextMenuItem>
@ -570,20 +614,29 @@
<div class="row fixed-bottom p-2 b-1 border-top text-center d-flex d-md-none" <div class="row fixed-bottom p-2 b-1 border-top text-center d-flex d-md-none"
style="background: rgba(255, 255, 255, 0.6)" style="background: rgba(255, 255, 255, 0.6)"
v-if="current_tab === 0"> v-if="current_tab === 0">
<div class="col-md-3 col-6"> <div class="col-6">
<a class="btn btn-block btn-success shadow-none" @click="entrymode = !entrymode" <a class="btn btn-block btn-success shadow-none" @click="entrymode = !entrymode"
><i class="fas fa-cart-plus"></i> ><i class="fas fa-cart-plus"></i>
{{ $t("New Entry") }} {{ $t("New Entry") }}
</a> </a>
</div> </div>
<div class="col-md-3 col-6"> <div class="col-6">
<a class="btn btn-block btn-secondary shadow-none" <b-dropdown id="dropdown-dropup" block dropup variant="primary" class="shadow-none">
><i class="fas fa-download"></i> <template #button-content>
{{ $t("Export") }} <i class='fas fa-download'></i> {{ $t('Export') }}
</a> </template>
<DownloadPDF dom="#shoppinglist" name="shopping.pdf" :label="$t('download_pdf')" icon="far fa-file-pdf"/>
<DownloadCSV :items="csvData" :delim="settings.csv_delim" name="shopping.csv" :label="$t('download_csv')"
icon="fas fa-file-csv"/>
<CopyToClipboard :items="csvData" :settings="settings" :label="$t('copy_to_clipboard')"
icon="fas fa-clipboard-list"/>
<CopyToClipboard :items="csvData" :settings="settings" format="table" :label="$t('copy_markdown_table')"
icon="fab fa-markdown"/>
</b-dropdown>
</div> </div>
</div> </div>
</transition> </transition>
</div> </div>
</template> </template>
@ -654,6 +707,7 @@ export default {
csv_delim: ",", csv_delim: ",",
csv_prefix: undefined, csv_prefix: undefined,
shopping_add_onhand: true, shopping_add_onhand: true,
left_handed: false
}, },
new_supermarket: {entrymode: false, value: undefined, editmode: undefined}, new_supermarket: {entrymode: false, value: undefined, editmode: undefined},
new_category: {entrymode: false, value: undefined}, new_category: {entrymode: false, value: undefined},
@ -842,20 +896,22 @@ export default {
// this.genericAPI inherited from ApiMixin // this.genericAPI inherited from ApiMixin
addItem: function () { addItem: function () {
if (this.entry_mode_simple) { if (this.entry_mode_simple) {
this.genericPostAPI("api_ingredient_from_string", {text: this.new_item.ingredient}).then((result) => { if (this.new_item.ingredient !== '' && this.new_item.ingredient !== undefined) {
this.genericPostAPI("api_ingredient_from_string", {text: this.new_item.ingredient}).then((result) => {
let unit = null let unit = null
if (result.data.unit !== '') { if (result.data.unit !== '') {
unit = {'name': result.data.unit} unit = {'name': result.data.unit}
} }
this.new_item = { this.new_item = {
amount: result.data.amount, amount: result.data.amount,
unit: unit, unit: unit,
food: {name: result.data.food}, food: {name: result.data.food},
} }
this.addEntry() this.addEntry()
}) })
}
} else { } else {
this.addEntry() this.addEntry()
} }
@ -1292,6 +1348,17 @@ export default {
window.removeEventListener("online", this.updateOnlineStatus) window.removeEventListener("online", this.updateOnlineStatus)
window.removeEventListener("offline", this.updateOnlineStatus) window.removeEventListener("offline", this.updateOnlineStatus)
}, },
}, directives: {
hover: {
inserted: function (el) {
el.addEventListener("mouseenter", () => {
el.classList.add("shadow")
})
el.addEventListener("mouseleave", () => {
el.classList.remove("shadow")
})
},
},
}, },
} }
</script> </script>
@ -1340,4 +1407,21 @@ export default {
.form-control-append { .form-control-append {
font-size: 20px; font-size: 20px;
} }
@media (max-width: 768px) {
#shoppinglist {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: scroll;
overflow-x: hidden;
height: 65vh;
padding-right: 8px !important;
}
}
.settings-checkbox {
font-size: 0.3rem
}
</style> </style>

2
vue/src/components/Buttons/CopyToClipboard.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div style="cursor:pointer">
<a v-if="!button" class="dropdown-item" @click="clipboard"><i :class="icon"></i> {{ label }}</a> <a v-if="!button" class="dropdown-item" @click="clipboard"><i :class="icon"></i> {{ label }}</a>
<b-button v-if="button" @click="clipboard">{{ label }}</b-button> <b-button v-if="button" @click="clipboard">{{ label }}</b-button>
</div> </div>

2
vue/src/components/Buttons/DownloadCSV.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div style="cursor:pointer">
<a v-if="!button" class="dropdown-item" @click="downloadFile"><i :class="icon"></i> {{ label }}</a> <a v-if="!button" class="dropdown-item" @click="downloadFile"><i :class="icon"></i> {{ label }}</a>
<b-button v-if="button" @click="downloadFile">{{ label }}</b-button> <b-button v-if="button" @click="downloadFile">{{ label }}</b-button>
</div> </div>

2
vue/src/components/Buttons/DownloadPDF.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div style="cursor:pointer">
<a v-if="!button" class="dropdown-item" @click="downloadFile"><i :class="icon"></i> {{ label }}</a> <a v-if="!button" class="dropdown-item" @click="downloadFile"><i :class="icon"></i> {{ label }}</a>
<b-button v-if="button" @click="downloadFile">{{ label }}</b-button> <b-button v-if="button" @click="downloadFile">{{ label }}</b-button>
</div> </div>

256
vue/src/components/ShoppingLineItem.vue
View File

@ -1,135 +1,150 @@
<template> <template>
<div id="shopping_line_item"> <div id="shopping_line_item">
<b-container fluid class="pr-0 pl-1 pl-md-3"> <b-row align-h="start">
<!-- summary rows --> <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0"
<b-row align-h="start"> v-if="settings.left_handed">
<b-col cols="1" class="align-items-center d-flex"> <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked"
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"> @change="updateChecked"
:key="entries[0].id"/>
<b-button size="sm" @click="showDetails = !showDetails" class="d-inline-block d-md-none p-0" variant="link">
<div class="text-nowrap"><i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i>
</div>
</b-button>
</b-col>
<b-col cols="1" class="align-items-center d-flex">
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"
@click.stop="$emit('open-context-menu', $event, entries)">
<button
aria-haspopup="true"
aria-expanded="false"
type="button"
:class="settings.left_handed ? 'pl-0' : ''"
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret">
<i class="fas fa-ellipsis-v fa-lg"></i>
</button>
</div>
</b-col>
<b-col cols="1" class="justify-content-center align-items-center d-none d-md-flex">
<input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked"
@change="updateChecked"
:key="entries[0].id"/>
</b-col>
<b-col cols="8" md="9">
<b-row class="d-flex h-100">
<b-col cols="6" md="3" class="d-flex align-items-center" v-if="Object.entries(formatAmount).length == 1">
<strong class="mr-1">{{ Object.entries(formatAmount)[0][1] }}</strong> {{
Object.entries(formatAmount)[0][0]
}}
</b-col>
<b-col cols="6" md="3" class="d-flex flex-column" v-if="Object.entries(formatAmount).length != 1">
<div class="small" v-for="(x, i) in Object.entries(formatAmount)" :key="i">{{ x[1] }} &ensp;
{{ x[0] }}
</div>
</b-col>
<b-col cols="6" md="6" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
{{ formatFood }}
</b-col>
<b-col cols="3" data-html2canvas-ignore="true"
class="align-items-center d-none d-md-flex justify-content-end">
<b-button size="sm" @click="showDetails = !showDetails" class="p-0 mr-0 mr-md-2 p-md-2 text-decoration-none"
variant="link">
<div class="text-nowrap"><i class="fa fa-chevron-right rotate"
:class="showDetails ? 'rotated' : ''"></i> <span
class="d-none d-md-inline-block">{{ $t('Details') }}</span>
</div>
</b-button>
</b-col>
</b-row>
</b-col>
<b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none"
v-if="!settings.left_handed">
<b-button size="sm" @click="showDetails = !showDetails" class="d-inline-block d-md-none p-0" variant="link">
<div class="text-nowrap"><i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i>
</div>
</b-button>
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked"
@change="updateChecked"
:key="entries[0].id"/>
</b-col>
</b-row>
<b-row align-h="center" class="d-none d-md-flex">
<b-col cols="12">
<div class="small text-muted text-truncate">{{ formatHint }}</div>
</b-col>
</b-row>
<!-- detail rows -->
<div class="card no-body mb-1 pt-2 align-content-center shadow-sm" v-if="showDetails">
<div v-for="(e, x) in entries" :key="e.id">
<b-row class="small justify-content-around">
<b-col cols="auto" md="4" class="overflow-hidden text-nowrap">
<button <button
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false" aria-expanded="false"
type="button" type="button"
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret" class="btn btn-link btn-sm m-0 p-0 pl-2"
@click.stop="$emit('open-context-menu', $event, entries)"> style="text-overflow: ellipsis"
<i class="fas fa-ellipsis-v fa-lg"></i> @click.stop="openRecipeCard($event, e)"
@mouseover="openRecipeCard($event, e)">
{{ formatOneRecipe(e) }}
</button> </button>
</div> </b-col>
</b-col> <b-col cols="auto" md="4" class="text-muted">{{ formatOneMealPlan(e) }}</b-col>
<b-col cols="1" class="justify-content-center align-items-center d-none d-md-flex"> <b-col cols="auto" md="4" class="text-muted text-right overflow-hidden text-nowrap pr-4">
<input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked" {{ formatOneCreatedBy(e) }}
@change="updateChecked" <div v-if="formatOneCompletedAt(e)">{{ formatOneCompletedAt(e) }}</div>
:key="entries[0].id"/> </b-col>
</b-col> </b-row>
<b-col cols="8" md="9"> <b-row align-h="start">
<b-row class="d-flex h-100"> <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0"
<b-col cols="6" md="6" class="d-flex align-items-center" v-if="Object.entries(formatAmount).length == 1"> v-if="settings.left_handed">
<div><strong>{{ Object.entries(formatAmount)[0][1] }}</strong> &ensp; <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile"
{{ Object.entries(formatAmount)[0][0] }} :checked="formatChecked"
</div> @change="updateChecked"
</b-col> :key="entries[0].id"/>
<b-col cols="6" md="6" class="d-flex flex-column" v-if="Object.entries(formatAmount).length != 1"> </b-col>
<div class="small" v-for="(x, i) in Object.entries(formatAmount)" :key="i">{{ x[1] }} &ensp; <b-col cols="1" class="align-items-center d-flex">
{{ x[0] }} <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"
</div> @click.stop="$emit('open-context-menu', $event, e)">
</b-col>
<b-col cols="6" md="3" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
{{ formatFood }}
</b-col>
<b-col cols="3" data-html2canvas-ignore="true" class="align-items-center d-none d-md-flex">
<b-button size="sm" @click="showDetails = !showDetails" class="p-0 mr-0 mr-md-2 p-md-2" variant="link">
<div class="text-nowrap"><i class="fa fa-chevron-right rotate"
:class="showDetails ? 'rotated' : ''"></i> <span
class="d-none d-md-inline-block">{{ $t('Details') }}</span>
</div>
</b-button>
</b-col>
</b-row>
</b-col>
<b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none">
<b-button size="sm" @click="showDetails = !showDetails" class="d-inline-block d-md-none p-0" variant="link">
<div class="text-nowrap"><i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i>
</div>
</b-button>
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked"
@change="updateChecked"
:key="entries[0].id"/>
</b-col>
</b-row>
<b-row align-h="center" class="d-none d-md-flex">
<b-col cols="12">
<div class="small text-muted text-truncate">{{ formatHint }}</div>
</b-col>
</b-row>
</b-container>
<!-- detail rows -->
<div class="card no-body mb-1 pt-2 align-content-center ml-2" v-if="showDetails">
<b-container fluid>
<div v-for="(e, x) in entries" :key="e.id">
<b-row class="small justify-content-around">
<b-col cols="auto" md="4" class="overflow-hidden text-nowrap">
<button <button
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false" aria-expanded="false"
type="button" type="button"
class="btn btn-link btn-sm m-0 p-0" :class="settings.left_handed ? 'pl-0' : ''"
style="text-overflow: ellipsis" class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret">
@click.stop="openRecipeCard($event, e)" <i class="fas fa-ellipsis-v fa-lg"></i>
@mouseover="openRecipeCard($event, e)">
{{ formatOneRecipe(e) }}
</button> </button>
</b-col> </div>
<b-col cols="auto" md="4" class="text-muted">{{ formatOneMealPlan(e) }}</b-col> </b-col>
<b-col cols="auto" md="4" class="text-muted text-right overflow-hidden text-nowrap"> <b-col cols="1" class="justify-content-center align-items-center d-none d-md-flex">
{{ formatOneCreatedBy(e) }} <input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked"
<div v-if="formatOneCompletedAt(e)">{{ formatOneCompletedAt(e) }}</div> @change="updateChecked"
</b-col> :key="entries[0].id"/>
</b-row> </b-col>
<b-row align-h="start"> <b-col cols="8" md="9">
<b-col cols="1" class="align-items-center d-flex"> <b-row class="d-flex align-items-center h-100">
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"> <b-col cols="6" md="3" class="d-flex align-items-center">
<button <strong class="mr-1">{{ formatOneAmount(e) }}</strong> {{ formatOneUnit(e) }}
aria-haspopup="true" </b-col>
aria-expanded="false" <b-col cols="6" md="6" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
type="button" {{ formatOneFood(e) }}
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret" </b-col>
@click.stop="$emit('open-context-menu', $event, e)"> <b-col cols="12" class="d-flex d-md-none">
<i class="fas fa-ellipsis-v fa-lg"></i> <div class="small text-muted text-truncate" v-for="(n, i) in formatOneNote(e)" :key="i">{{ n }}</div>
</button> </b-col>
</div> </b-row>
</b-col> </b-col>
<b-col cols="1" class="justify-content-center align-items-center d-none d-md-flex"> <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none"
<input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked" v-if="!settings.left_handed">
@change="updateChecked" <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile"
:key="entries[0].id"/> :checked="formatChecked"
</b-col> @change="updateChecked"
<b-col cols="8" md="9"> :key="entries[0].id"/>
<b-row class="d-flex justify-content-around"> </b-col>
<b-col cols="6" md="6" class="d-flex align-items-center"> </b-row>
<div>{{ formatOneAmount(e) }} &ensp; <hr class="w-75" v-if="x !== entries.length -1"/>
{{ formatOneUnit(e) }} <div class="pb-4" v-if="x === entries.length -1"></div>
</div> </div>
</b-col>
<b-col cols="6" md="3" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
{{ formatOneFood(e) }}
</b-col>
<b-col cols="12" class="d-flex d-md-none">
<div class="small text-muted text-truncate" v-for="(n, i) in formatOneNote(e)" :key="i">{{ n }}</div>
</b-col>
</b-row>
</b-col>
<b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none">
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile"
:checked="formatChecked"
@change="updateChecked"
:key="entries[0].id"/>
</b-col>
</b-row>
<hr class="w-75" v-if="x !== entries.length -1"/>
<div class="pb-4" v-if="x === entries.length -1"></div>
</div>
</b-container>
</div> </div>
<hr class="m-1" v-if="!showDetails"/> <hr class="m-1" v-if="!showDetails"/>
<ContextMenu ref="recipe_card" triggers="click, hover" :title="$t('Filters')" style="max-width: 300"> <ContextMenu ref="recipe_card" triggers="click, hover" :title="$t('Filters')" style="max-width: 300">
@ -173,6 +188,7 @@ export default {
entries: { entries: {
type: Array, type: Array,
}, },
settings: Object,
groupby: {type: String}, groupby: {type: String},
}, },
data() { data() {

4
vue/src/locales/en.json
View File

@ -287,5 +287,7 @@
"sql_debug": "SQL Debug", "sql_debug": "SQL Debug",
"remember_search": "Remember Search", "remember_search": "Remember Search",
"remember_hours": "Hours to Remember", "remember_hours": "Hours to Remember",
"tree_select": "Use Tree Selection" "tree_select": "Use Tree Selection",
"left_handed": "Left-handed mode",
"left_handed_help": "Will optimize the UI for use with your left hand."
} }