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

shopping list ux

Browse Source
This commit is contained in:
Kaibu
2022-01-20 00:29:10 +01:00
parent fc9eb249a8
commit 0f7dc096cb
2 changed files with 69 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,7 +35,7 @@
<b-spinner v-if="loading" type="border" small></b-spinner> <b-spinner v-if="loading" type="border" small></b-spinner>
{{ $t("Shopping_list") }} {{ $t("Shopping_list") }}
</template> </template>
<div class="container p-0 pr-lg-5 pl-lg-5" id="shoppinglist"> <div class="container p-0" id="shoppinglist">
<div class="row"> <div class="row">
<div class="col col-md-12 p-0 p-lg-3"> <div class="col col-md-12 p-0 p-lg-3">
<div role="tablist"> <div role="tablist">
@ -124,12 +124,12 @@
<div class="collapse" :id="'section-' + sectionID(x, i)" visible role="tabpanel" <div class="collapse" :id="'section-' + sectionID(x, i)" visible role="tabpanel"
:class="{ show: x == 'false' }"> :class="{ show: x == 'false' }">
<!-- passing an array of values to the table grouped by Food --> <!-- passing an array of values to the table grouped by Food -->
<transition-group name="slider-fade" mode="out-in"> <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">
<ShoppingLineItem :entries="entries[1]" :groupby="group_by" <ShoppingLineItem :entries="entries[1]" :groupby="group_by"
@open-context-menu="openContextMenu" @update-checkbox="updateChecked"/> @open-context-menu="openContextMenu" @update-checkbox="updateChecked"/>
</transition>
</div> </div>
</transition-group> </transition-group>
</div> </div>
@ -143,28 +143,30 @@
</b-tab> </b-tab>
<!-- recipe tab --> <!-- recipe tab -->
<b-tab :title="$t('Recipes')"> <b-tab :title="$t('Recipes')">
<table class="table w-100"> <div class="container p-0">
<thead> <table class="table w-100">
<tr> <thead>
<th scope="col">{{ $t("Meal_Plan") }}</th> <tr>
<th scope="col">{{ $t("Recipe") }}</th> <th scope="col">{{ $t("Meal_Plan") }}</th>
<th scope="col">{{ $t("Servings") }}</th> <th scope="col">{{ $t("Recipe") }}</th>
<th scope="col"></th> <th scope="col">{{ $t("Servings") }}</th>
</tr> <th scope="col"></th>
</thead> </tr>
<tr v-for="r in Recipes" :key="r.list_recipe"> </thead>
<td>{{ r.recipe_mealplan.name }}</td> <tr v-for="r in Recipes" :key="r.list_recipe">
<td>{{ r.recipe_mealplan.recipe_name }}</td> <td>{{ r.recipe_mealplan.name }}</td>
<td class="block-inline"> <td>{{ r.recipe_mealplan.recipe_name }}</td>
<b-form-input min="1" type="number" :debounce="300" :value="r.recipe_mealplan.servings" <td class="block-inline">
@input="updateServings($event, r.list_recipe)"></b-form-input> <b-form-input min="1" type="number" :debounce="300" :value="r.recipe_mealplan.servings"
</td> @input="updateServings($event, r.list_recipe)"></b-form-input>
<td> </td>
<i class="btn text-danger fas fa-trash fa-lg px-2 border-0" variant="link" :title="$t('Delete')" <td>
@click="deleteRecipe($event, r.list_recipe)"/> <i class="btn text-danger fas fa-trash fa-lg px-2 border-0" variant="link" :title="$t('Delete')"
</td> @click="deleteRecipe($event, r.list_recipe)"/>
</tr> </td>
</table> </tr>
</table>
</div>
</b-tab> </b-tab>
<!-- supermarkets tab --> <!-- supermarkets tab -->
<b-tab :title="$t('Supermarkets')"> <b-tab :title="$t('Supermarkets')">
@ -173,8 +175,7 @@
<div class="col col-md-5"> <div class="col col-md-5">
<b-card> <b-card>
<template #header> <template #header>
<h4 class="mb-0"> <h4 class="mb-0">{{ $t("Supermarkets") }}
{{ $t("Supermarkets") }}
<b-button <b-button
variant="link" variant="link"
class="p-0 m-0 float-right" class="p-0 m-0 float-right"
@ -193,7 +194,6 @@
</b-button> </b-button>
</h4> </h4>
</template> </template>
<b-card <b-card
class="m-1 p-1 no-body" class="m-1 p-1 no-body"
border-variant="success" border-variant="success"
@ -201,14 +201,16 @@
header-text-variant="white" header-text-variant="white"
align="center" align="center"
v-if="new_supermarket.entrymode" v-if="new_supermarket.entrymode"
:header="$t('SupermarketName')" :header="new_supermarket.value ? new_supermarket.value : $t('SupermarketName')">
> <b-input-group>
<div class="input-group"> <b-form-input type="text" class="form-control-append" :placeholder="$t('SupermarketName')"
<b-form-input type="text" :placeholder="$t('SupermarketName')" v-model="new_supermarket.value"/> v-model="new_supermarket.value"/>
<b-button class="input-group-append" variant="success" @click="addSupermarket"><i <b-input-group-append>
class="pr-2 pt-1 fas fa-save"></i> {{ $t("Save") }} <b-button class="input-group-append" variant="success" @click="addSupermarket"><i
</b-button> class="pr-2 pt-1 fas fa-save"></i> {{ $t("Save") }}
</div> </b-button>
</b-input-group-append>
</b-input-group>
</b-card> </b-card>
<b-card-body class="m-0 p-0"> <b-card-body class="m-0 p-0">
@ -236,29 +238,22 @@
</b-card-body> </b-card-body>
</b-card> </b-card>
</div> </div>
<!-- supermarket category column -->
<div class="col col-md-5"> <div class="col col-md-5">
<b-card class="no-body"> <b-card>
<template #header> <template #header>
<div class="row"> <h4 class="mb-0">{{ $t("Shopping_Categories") }}
<div class="col"> <b-button
{{ $t("Shopping_Categories") }} variant="link"
</div> class="p-0 m-0 float-right"
@click="
<div class="col-auto text-right ml-auto">
<b-button
variant="link"
class="p-0 m-0"
@click="
new_category.entrymode = !new_category.entrymode new_category.entrymode = !new_category.entrymode
new_supermarket.entrymode = false new_supermarket.entrymode = false
" "
> >
<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-muted'"/>
</b-button> </b-button>
</div> </h4>
</div>
</template> </template>
<b-card <b-card
class="m-1 p-1 no-body" class="m-1 p-1 no-body"
@ -267,14 +262,17 @@
header-text-variant="white" header-text-variant="white"
align="center" align="center"
v-if="new_category.entrymode" v-if="new_category.entrymode"
:header="$t('CategoryName')" :header="new_category.value ? new_category.value : $t('CategoryName')"
> >
<div class="input-group"> <b-input-group>
<b-form-input type="text" :placeholder="$t('CategoryName')" v-model="new_category.value"/> <b-form-input type="text" class="form-control-append" :placeholder="$t('CategoryName')"
<b-button class="input-group-append" variant="success" @click="addCategory"><i v-model="new_category.value"/>
class="pr-2 pt-1 fas fa-save"></i> {{ $t("Save") }} <b-input-group-append>
</b-button> <b-button class="input-group-append" variant="success" @click="addCategory"><i
</div> class="pr-2 pt-1 fas fa-save"></i> {{ $t("Save") }}
</b-button>
</b-input-group-append>
</b-input-group>
</b-card> </b-card>
<b-card-sub-title v-if="new_supermarket.editmode" class="pt-0 pb-3">{{ <b-card-sub-title v-if="new_supermarket.editmode" class="pt-0 pb-3">{{
@ -791,7 +789,7 @@ export default {
watch: { watch: {
selected_supermarket(newVal, oldVal) { selected_supermarket(newVal, oldVal) {
this.supermarket_categories_only = this.settings.filter_to_supermarket this.supermarket_categories_only = this.settings.filter_to_supermarket
localStorage.setItem('shopping_v2_selected_supermarket', JSON.stringify(this.selected_supermarket)) localStorage.setItem('shopping_v2_selected_supermarket', JSON.stringify(this.selected_supermarket))
}, },
"settings.filter_to_supermarket": function (newVal, oldVal) { "settings.filter_to_supermarket": function (newVal, oldVal) {
this.supermarket_categories_only = this.settings.filter_to_supermarket this.supermarket_categories_only = this.settings.filter_to_supermarket
@ -1322,28 +1320,18 @@ export default {
background: #c8ebfb; background: #c8ebfb;
} }
.slider-fade-enter-active, .slider-fade-leave-active { .slide-fade-enter-active, .slide-fade-leave-active {
transition: all 0.3s ease; transition: all 0.2s ease;
} }
.slider-fade-enter, .slider-fade-leave-to .slide-fade-enter, .slide-fade-leave-to
/* .slider-fade-leave-active below version 2.1.8 */ /* .slider-fade-leave-active below version 2.1.8 */
{ {
transform: translateX(10px); transform: translateX(10px);
opacity: 0; opacity: 0;
} }
.slided-fade-enter-active { .form-control-append {
transition: all 0.3s ease; font-size: 20px;
}
.slided-fade-leave-active {
transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}
.slided-fade-enter,
.slided-fade-leave-to {
transform: translateY(10px);
opacity: 0;
} }
</style> </style>

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

@ -21,7 +21,7 @@
:key="entries[0].id"/> :key="entries[0].id"/>
</b-col> </b-col>
<b-col cols="8" md="9"> <b-col cols="8" md="9">
<b-row class="d-flex h-100" @click.stop="$emit('open-context-menu', $event, entries)"> <b-row class="d-flex h-100">
<b-col cols="6" md="6" class="d-flex align-items-center" v-if="Object.entries(formatAmount).length == 1"> <b-col cols="6" md="6" class="d-flex align-items-center" v-if="Object.entries(formatAmount).length == 1">
<div><strong>{{ Object.entries(formatAmount)[0][1] }}</strong> &ensp; <div><strong>{{ Object.entries(formatAmount)[0][1] }}</strong> &ensp;
{{ Object.entries(formatAmount)[0][0] }} {{ Object.entries(formatAmount)[0][0] }}
@ -85,10 +85,6 @@
<div v-if="formatOneCompletedAt(e)">{{ formatOneCompletedAt(e) }}</div> <div v-if="formatOneCompletedAt(e)">{{ formatOneCompletedAt(e) }}</div>
</b-col> </b-col>
</b-row> </b-row>
<b-row align-h="start"> <b-row align-h="start">
<b-col cols="1" class="align-items-center d-flex"> <b-col cols="1" class="align-items-center d-flex">
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"> <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true">