ui improvements (shopping and meal plan)
- fixed content scaling for meal plan and shopping - style fixes on shopping list - touch based swipe actions for shopping list - better mobile experience overall
This commit is contained in:
Kaibu
@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<b-tabs content-class="mt-3" v-model="current_tab">
|
||||
<b-tab :title="$t('Planner')" active>
|
||||
<div class="row">
|
||||
<div class="row calender-row">
|
||||
<div class="col-12 calender-parent">
|
||||
<calendar-view
|
||||
:show-date="showDate"
|
||||
@ -693,19 +693,24 @@ export default {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.calender-row {
|
||||
height: calc(100% - 240px);
|
||||
}
|
||||
|
||||
.calender-parent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
height: 70vh;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.cv-item {
|
||||
white-space: inherit !important;
|
||||
}
|
||||
|
||||
|
||||
.isHovered {
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
@ -837,4 +842,10 @@ having to override as much.
|
||||
opacity: 0.5;
|
||||
background: #c8ebfb;
|
||||
}
|
||||
|
||||
@media (max-width: 767.9px) {
|
||||
.periodLabel {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -233,7 +233,7 @@ export default {
|
||||
this.loadRecipe(window.RECIPE_ID)
|
||||
this.$i18n.locale = window.CUSTOM_LOCALE
|
||||
this.requestWakeLock()
|
||||
window.addEventListener('resize', this.handleRezise);
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.destroyWakeLock()
|
||||
@ -249,7 +249,7 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
handleRezise: function () {
|
||||
handleResize: function () {
|
||||
if (document.getElementById('nutrition_container') !== null) {
|
||||
this.ingredient_height = document.getElementById('ingredient_container').clientHeight - document.getElementById('nutrition_container').clientHeight
|
||||
} else {
|
||||
@ -300,7 +300,7 @@ export default {
|
||||
this.loading = false
|
||||
|
||||
setTimeout(() => {
|
||||
this.handleRezise()
|
||||
this.handleResize()
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
|
||||
@ -1,42 +1,50 @@
|
||||
<template>
|
||||
<div id="app" style="margin-bottom: 4vh">
|
||||
<b-alert :show="!online" dismissible class="small float-up" variant="warning">{{ $t("OfflineAlert") }}</b-alert>
|
||||
<div class="row float-top pl-0 pr-0">
|
||||
<div class="row float-top w-100">
|
||||
<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">
|
||||
<i class="btn fas fa-plus-circle fa-lg px-0" @click="entrymode = !entrymode" :class="entrymode ? 'text-success' : 'text-primary'" />
|
||||
<i class="btn fas fa-plus-circle fa-lg px-0" @click="entrymode = !entrymode"
|
||||
:class="entrymode ? 'text-success' : 'text-primary'"/>
|
||||
</b-button>
|
||||
<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-primary px-1" id="downloadShoppingLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
|
||||
<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>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="downloadShoppingLink">
|
||||
<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" />
|
||||
<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"/>
|
||||
</div>
|
||||
</b-button>
|
||||
<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" :class="filterApplied ? 'text-danger' : 'text-primary'" />
|
||||
</b-button>
|
||||
<i id="id_filters_button" class="fas fa-filter fa-fw mt-1" style="font-size: 16px"
|
||||
:class="filterApplied ? 'text-danger' : 'text-primary'"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-tabs content-class="mt-3" v-model="current_tab">
|
||||
<b-tabs content-class="mt-2" v-model="current_tab" class="mt-md-1" style="margin-top: 22px">
|
||||
<!-- shopping list tab -->
|
||||
<b-tab active>
|
||||
<template #title>
|
||||
<b-spinner v-if="loading" type="border" small></b-spinner>
|
||||
{{ $t("Shopping_list") }}
|
||||
<b-spinner v-if="loading" type="border" small class="d-inline-block"></b-spinner>
|
||||
<i v-if="!loading" class="fas fa-shopping-cart fa-fw d-inline-block d-md-none"></i>
|
||||
<span class="d-none d-md-block">{{ $t('Shopping_list') }}</span>
|
||||
</template>
|
||||
<div class="container p-0" id="shoppinglist">
|
||||
<div class="row">
|
||||
<div class="col col-md-12 p-0 p-lg-3">
|
||||
<div role="tablist">
|
||||
<!-- add to shopping form -->
|
||||
|
||||
<b-row class="justify-content-md-center align-items-center pl-1 pr-1" v-if="entrymode">
|
||||
<b-col cols="12" md="3" v-if="!ui.entry_mode_simple" class="d-none d-md-block mt-1">
|
||||
<div class="container">
|
||||
<b-row class="justify-content-md-center align-items-center pl-1 pr-1"
|
||||
v-if="entrymode">
|
||||
<b-col cols="12" md="3" v-if="!ui.entry_mode_simple"
|
||||
class="d-none d-md-block mt-1">
|
||||
<b-form-input
|
||||
size="lg"
|
||||
min="1"
|
||||
@ -47,20 +55,28 @@
|
||||
></b-form-input>
|
||||
</b-col>
|
||||
<b-col cols="12" md="4" v-if="!ui.entry_mode_simple" class="mt-1">
|
||||
<lookup-input :class_list="'mb-0'" :form="formUnit" :model="Models.UNIT" @change="new_item.unit = $event" :show_label="false" :clear="clear" />
|
||||
<lookup-input :class_list="'mb-0'" :form="formUnit" :model="Models.UNIT"
|
||||
@change="new_item.unit = $event" :show_label="false"
|
||||
:clear="clear"/>
|
||||
</b-col>
|
||||
<b-col cols="12" md="4" v-if="!ui.entry_mode_simple" class="mt-1">
|
||||
<lookup-input :class_list="'mb-0'" :form="formFood" :model="Models.FOOD" @change="new_item.food = $event" :show_label="false" :clear="clear" />
|
||||
<lookup-input :class_list="'mb-0'" :form="formFood" :model="Models.FOOD"
|
||||
@change="new_item.food = $event" :show_label="false"
|
||||
:clear="clear"/>
|
||||
</b-col>
|
||||
<b-col cols="12" md="11" v-if="ui.entry_mode_simple" class="mt-1">
|
||||
<b-form-input size="lg" type="text" :placeholder="$t('QuickEntry')" v-model="new_item.ingredient" @keyup.enter="addItem"></b-form-input>
|
||||
<b-form-input size="lg" type="text" :placeholder="$t('QuickEntry')"
|
||||
v-model="new_item.ingredient"
|
||||
@keyup.enter="addItem"></b-form-input>
|
||||
</b-col>
|
||||
<b-col cols="12" md="1" class="d-none d-md-block mt-1">
|
||||
<b-button variant="link" class="px-0">
|
||||
<i class="btn fas fa-cart-plus fa-lg px-0 text-success" @click="addItem" />
|
||||
<i class="btn fas fa-cart-plus fa-lg px-0 text-success"
|
||||
@click="addItem"/>
|
||||
</b-button>
|
||||
</b-col>
|
||||
<b-col cols="12" md="3" v-if="!ui.entry_mode_simple" class="d-block d-md-none mt-1">
|
||||
<b-col cols="12" md="3" v-if="!ui.entry_mode_simple"
|
||||
class="d-block d-md-none mt-1">
|
||||
<b-row>
|
||||
<b-col cols="9">
|
||||
<b-form-input
|
||||
@ -74,7 +90,7 @@
|
||||
</b-col>
|
||||
<b-col cols="3" class="flex-grow-1">
|
||||
<b-button variant="success" class="p-0 pt-1 w-100 h-100">
|
||||
<i class="btn fas fa-cart-plus fa-lg" @click="addItem" />
|
||||
<i class="btn fas fa-cart-plus fa-lg" @click="addItem"/>
|
||||
</b-button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
@ -85,19 +101,24 @@
|
||||
<b-form-checkbox switch v-model="ui.entry_mode_simple">
|
||||
{{ $t("QuickEntry") }}
|
||||
</b-form-checkbox>
|
||||
<b-button variant="success" size="sm" class="d-flex d-md-none p-0" v-if="ui.entry_mode_simple">
|
||||
<i class="btn fas fa-cart-plus" @click="addItem" />
|
||||
<b-button variant="success" size="sm" class="d-flex d-md-none p-0"
|
||||
v-if="ui.entry_mode_simple">
|
||||
<i class="btn fas fa-cart-plus" @click="addItem"/>
|
||||
</b-button>
|
||||
</b-row>
|
||||
|
||||
</div>
|
||||
<!-- shopping list table -->
|
||||
<div v-if="items && items.length > 0">
|
||||
<div v-for="(done, x) in Sections" :key="x">
|
||||
<div v-if="x == 'true'" class="bg-header w-100 text-center d-flex justify-content-center align-items-center">
|
||||
<div v-if="x == 'true'"
|
||||
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 v-for="(s, i) in done" :key="i">
|
||||
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true" v-if="Object.entries(s).length > 0">
|
||||
<div class="dropdown b-dropdown position-static inline-block"
|
||||
data-html2canvas-ignore="true" v-if="Object.entries(s).length > 0">
|
||||
<button
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
@ -115,15 +136,17 @@
|
||||
:href="'#section-' + sectionID(x, i)"
|
||||
:aria-expanded="'true' ? x == 'false' : 'true'"
|
||||
>
|
||||
<i class="fa fa-chevron-right rotate" />
|
||||
<i class="fa fa-chevron-right rotate"/>
|
||||
<span class="h6 ml-2 text-secondary">{{ i }}</span>
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
<div class="collapse" :id="'section-' + sectionID(x, i)" visible role="tabpanel" :class="{ show: x == 'false' }">
|
||||
<div class="collapse" :id="'section-' + sectionID(x, i)" visible
|
||||
role="tabpanel" :class="{ show: x == 'false' }">
|
||||
<!-- passing an array of values to the table grouped by Food -->
|
||||
<transition-group name="slide-fade">
|
||||
<div class="ml-4 mr-0" v-for="(entries, x) in Object.entries(s)" :key="x">
|
||||
<div class="pl-4 pr-0" v-for="(entries, x) in Object.entries(s)"
|
||||
:key="x">
|
||||
<transition name="slide-fade" mode="out-in">
|
||||
<shopping-line-item
|
||||
:entries="entries[1]"
|
||||
@ -131,6 +154,7 @@
|
||||
:settings="settings"
|
||||
@open-context-menu="openContextMenu"
|
||||
@update-checkbox="updateChecked"
|
||||
@update-delaythis="delayThis"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
@ -146,16 +170,35 @@
|
||||
</b-tab>
|
||||
<!-- recipe tab -->
|
||||
<b-tab :title="$t('Recipes')">
|
||||
<template #title>
|
||||
<i class="fas fa-book fa-fw d-block d-md-none"></i>
|
||||
<span class="d-none d-md-block">{{ $t('Recipes') }}</span>
|
||||
</template>
|
||||
<div class="container p-0">
|
||||
<b-row class="justify-content-md-center align-items-center p-1">
|
||||
<b-col cols="10">
|
||||
<b-input-group>
|
||||
<b-input-group-prepend is-text>
|
||||
{{ $t("Servings") }}
|
||||
</b-input-group-prepend>
|
||||
<b-input-group-prepend is-text>
|
||||
<input type="number" :min="1" v-model="add_recipe_servings" style="width: 3em" />
|
||||
</b-input-group-prepend>
|
||||
<div class="row">
|
||||
<div class="col col-md-12 p-0 p-lg-3">
|
||||
<div role="tablist">
|
||||
<!-- add to shopping form -->
|
||||
<div class="container">
|
||||
<b-row class="justify-content-md-center align-items-center pl-1 pr-1">
|
||||
<b-col cols="10" md="3" class="mt-1">
|
||||
<b-form-input
|
||||
size="lg"
|
||||
min="1"
|
||||
type="number"
|
||||
:description="$t('Servings')"
|
||||
v-model="add_recipe_servings"
|
||||
style="font-size: 16px; border-radius: 5px !important; border: 1px solid #e8e8e8 !important"
|
||||
></b-form-input>
|
||||
</b-col>
|
||||
<b-col cols="2" md="1" class="d-block d-md-none mt-1">
|
||||
<b-button variant="link" class="px-0">
|
||||
<i class="btn fas fa-cart-plus fa-lg px-0 text-success"
|
||||
@click="addRecipeToShopping"
|
||||
:disabled="!new_recipe.id"/>
|
||||
</b-button>
|
||||
</b-col>
|
||||
<b-col cols="12" md="8" class="mt-1">
|
||||
<generic-multiselect
|
||||
class="input-group-text m-0 p-0"
|
||||
@change="new_recipe = $event.val"
|
||||
@ -166,13 +209,16 @@
|
||||
:limit="20"
|
||||
:multiple="false"
|
||||
/>
|
||||
<b-input-group-append>
|
||||
<b-button variant="success" @click="addRecipeToShopping" :disabled="!new_recipe.id">{{ $t("Add_to_Shopping") }}</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-col>
|
||||
<b-col cols="12" md="1" class="d-none d-md-block mt-1">
|
||||
<b-button variant="link" class="px-0">
|
||||
<i class="btn fas fa-cart-plus fa-lg px-0 text-success"
|
||||
@click="addRecipeToShopping"
|
||||
:disabled="!new_recipe.id"/>
|
||||
</b-button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<table class="table w-100">
|
||||
<table class="table w-100 mt-3 recipe-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">{{ $t("Meal_Plan") }}</th>
|
||||
@ -185,20 +231,36 @@
|
||||
<td>{{ r.recipe_mealplan.name }}</td>
|
||||
<td>{{ r.recipe_mealplan.recipe_name }}</td>
|
||||
<td class="block-inline">
|
||||
<b-form-input min="1" type="number" :debounce="300" :value="r.recipe_mealplan.servings" @input="updateServings($event, r.list_recipe)"></b-form-input>
|
||||
<b-form-input min="1" type="number" :debounce="300"
|
||||
:value="r.recipe_mealplan.servings"
|
||||
@input="updateServings($event, r.list_recipe)"></b-form-input>
|
||||
</td>
|
||||
<td>
|
||||
<i class="btn text-primary far fa-eye fa-lg px-2 border-0" variant="link" :title="$t('view_recipe')" @click="editRecipeList($event, r)" />
|
||||
</td>
|
||||
<td>
|
||||
<i class="btn text-danger fas fa-trash fa-lg px-2 border-0" variant="link" :title="$t('Delete')" @click="deleteRecipe($event, r.list_recipe)" />
|
||||
<i class="text-primary far fa-eye fa-fw fa-lg"
|
||||
:title="$t('view_recipe')" @click="editRecipeList($event, r)"/>
|
||||
<i class="text-danger fas fa-trash fa-fw fa-lg mt-3"
|
||||
:title="$t('Delete')" @click="deleteRecipe($event, r.list_recipe)"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-tab>
|
||||
<!-- supermarkets tab -->
|
||||
<b-tab :title="$t('Supermarkets')">
|
||||
<b-tab>
|
||||
<template #title>
|
||||
<i class="fas fa-store-alt fa-fw d-block d-md-none"></i>
|
||||
<span class="d-none d-md-block">{{ $t('Supermarkets') }}</span>
|
||||
</template>
|
||||
<div class="container p-0">
|
||||
<div class="row">
|
||||
<div class="col col-md-12 p-0 p-lg-3">
|
||||
<div role="tablist">
|
||||
<!-- add to shopping form -->
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<!-- supermarkets column -->
|
||||
<div class="col col-md-5">
|
||||
@ -219,7 +281,8 @@
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="btn fas fa-plus-circle fa-lg px-0" :class="new_supermarket.entrymode ? 'text-success' : 'text-primary'" />
|
||||
<i class="btn fas fa-plus-circle fa-lg px-0"
|
||||
:class="new_supermarket.entrymode ? 'text-success' : 'text-primary'"/>
|
||||
</b-button>
|
||||
</h4>
|
||||
</template>
|
||||
@ -233,15 +296,21 @@
|
||||
:header="new_supermarket.value ? new_supermarket.value : $t('SupermarketName')"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-form-input type="text" class="form-control-append" :placeholder="$t('SupermarketName')" v-model="new_supermarket.value" />
|
||||
<b-form-input type="text" class="form-control-append"
|
||||
:placeholder="$t('SupermarketName')"
|
||||
v-model="new_supermarket.value"/>
|
||||
<b-input-group-append>
|
||||
<b-button class="input-group-append" variant="success" @click="addSupermarket"><i class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }} </b-button>
|
||||
<b-button class="input-group-append" variant="success"
|
||||
@click="addSupermarket">
|
||||
<i class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }}
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-card>
|
||||
|
||||
<b-card-body class="m-0 p-0">
|
||||
<b-card class="mt-1 p-0" 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-header class="p-2 border-0 pt-3">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
@ -257,17 +326,22 @@
|
||||
editSupermarket(s)
|
||||
"
|
||||
>
|
||||
<i class="btn fas fa-edit fa-lg px-0" :class="s.editmode ? 'text-success' : 'text-primary'" />
|
||||
<i class="btn fas fa-edit fa-lg px-0"
|
||||
:class="s.editmode ? 'text-success' : 'text-primary'"/>
|
||||
</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 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>
|
||||
</b-card-header>
|
||||
<b-card-body class="m-0 p-0">
|
||||
<generic-pill :item_list="s.category_to_supermarket" label="category::name" color="info"></generic-pill>
|
||||
<generic-pill :item_list="s.category_to_supermarket"
|
||||
label="category::name"
|
||||
color="info"></generic-pill>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-card-body>
|
||||
@ -286,7 +360,8 @@
|
||||
new_supermarket.entrymode = false
|
||||
"
|
||||
>
|
||||
<i class="btn fas fa-plus-circle fa-lg px-0" :class="new_category.entrymode ? 'text-success' : 'text-primary'" />
|
||||
<i class="btn fas fa-plus-circle fa-lg px-0"
|
||||
:class="new_category.entrymode ? 'text-success' : 'text-primary'"/>
|
||||
</b-button>
|
||||
</h4>
|
||||
</template>
|
||||
@ -300,15 +375,25 @@
|
||||
:header="new_category.value ? new_category.value : $t('CategoryName')"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-form-input type="text" class="form-control-append" :placeholder="$t('CategoryName')" v-model="new_category.value" />
|
||||
<b-form-input type="text" class="form-control-append"
|
||||
:placeholder="$t('CategoryName')"
|
||||
v-model="new_category.value"/>
|
||||
<b-input-group-append>
|
||||
<b-button class="input-group-append" variant="success" @click="addCategory"><i class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }} </b-button>
|
||||
<b-button class="input-group-append" variant="success"
|
||||
@click="addCategory"><i
|
||||
class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }}
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-card>
|
||||
|
||||
<b-card-sub-title v-if="new_supermarket.editmode" class="pt-0 pb-3">{{ $t("CategoryInstruction") }} </b-card-sub-title>
|
||||
<b-card v-if="new_supermarket.editmode && supermarketCategory.length === 0" class="m-0 p-0 font-weight-bold no-body" border-variant="success" v-bind:key="-1" />
|
||||
<b-card-sub-title v-if="new_supermarket.editmode" class="pt-0 pb-3">
|
||||
{{ $t("CategoryInstruction") }}
|
||||
</b-card-sub-title>
|
||||
<b-card
|
||||
v-if="new_supermarket.editmode && supermarketCategory.length === 0"
|
||||
class="m-0 p-0 font-weight-bold no-body" border-variant="success"
|
||||
v-bind:key="-1"/>
|
||||
<draggable
|
||||
class="list-group"
|
||||
:list="supermarketCategory"
|
||||
@ -319,7 +404,8 @@
|
||||
@change="saveSupermarketCategoryOrder"
|
||||
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
|
||||
no-body
|
||||
v-hover
|
||||
@ -332,13 +418,18 @@
|
||||
<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>
|
||||
<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'">
|
||||
<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 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>
|
||||
@ -347,8 +438,12 @@
|
||||
</b-card>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
<hr style="height: 2px; background-color: black" v-if="new_supermarket.editmode" />
|
||||
<b-card v-if="new_supermarket.editmode && notSupermarketCategory.length === 0" v-bind:key="-2" class="m-0 p-0 font-weight-bold no-body" border-variant="danger" />
|
||||
<hr style="height: 2px; background-color: black"
|
||||
v-if="new_supermarket.editmode"/>
|
||||
<b-card
|
||||
v-if="new_supermarket.editmode && notSupermarketCategory.length === 0"
|
||||
v-bind:key="-2" class="m-0 p-0 font-weight-bold no-body"
|
||||
border-variant="danger"/>
|
||||
<draggable
|
||||
class="list-group"
|
||||
:list="notSupermarketCategory"
|
||||
@ -359,18 +454,27 @@
|
||||
v-if="new_supermarket.editmode"
|
||||
v-bind="{ animation: 200 }"
|
||||
>
|
||||
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
|
||||
<b-card no-body v-hover class="mt-1 list-group-item p-2" style="cursor: move" v-for="c in notSupermarketCategory" v-bind:key="c.id" :border-variant="'danger'">
|
||||
<transition-group type="transition"
|
||||
:name="!drag ? 'flip-list' : null">
|
||||
<b-card no-body v-hover class="mt-1 list-group-item p-2"
|
||||
style="cursor: move"
|
||||
v-for="c in notSupermarketCategory" v-bind:key="c.id"
|
||||
:border-variant="'danger'">
|
||||
<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>
|
||||
<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'">
|
||||
<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 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>
|
||||
@ -382,16 +486,26 @@
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-tab>
|
||||
<!-- settings tab -->
|
||||
<b-tab :title="$t('Settings')">
|
||||
<b-tab>
|
||||
<template #title>
|
||||
<i class="fas fa-user-cog fa-fw d-block d-md-none"></i>
|
||||
<span class="d-none d-md-block">{{ $t('Settings') }}</span>
|
||||
</template>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-8">
|
||||
<b-card class="no-body">
|
||||
<div class="row">
|
||||
<div class="col col-md-6">{{ $t("mealplan_autoadd_shopping") }}</div>
|
||||
<div class="col col-md-6 text-right">
|
||||
<input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoadd_shopping" @change="saveSettings" />
|
||||
<input type="checkbox" class="form-control settings-checkbox"
|
||||
v-model="settings.mealplan_autoadd_shopping" @change="saveSettings"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sm mb-3">
|
||||
@ -403,7 +517,8 @@
|
||||
<div class="row">
|
||||
<div class="col col-md-6">{{ $t("mealplan_autoexclude_onhand") }}</div>
|
||||
<div class="col col-md-6 text-right">
|
||||
<input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoexclude_onhand" @change="saveSettings" />
|
||||
<input type="checkbox" class="form-control settings-checkbox"
|
||||
v-model="settings.mealplan_autoexclude_onhand" @change="saveSettings"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sm mb-3">
|
||||
@ -416,7 +531,8 @@
|
||||
<div class="row">
|
||||
<div class="col col-md-6">{{ $t("mealplan_autoinclude_related") }}</div>
|
||||
<div class="col col-md-6 text-right">
|
||||
<input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoinclude_related" @change="saveSettings" />
|
||||
<input type="checkbox" class="form-control settings-checkbox"
|
||||
v-model="settings.mealplan_autoinclude_related" @change="saveSettings"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sm mb-3">
|
||||
@ -453,7 +569,8 @@
|
||||
<div class="row">
|
||||
<div class="col col-md-6">{{ $t("shopping_auto_sync") }}</div>
|
||||
<div class="col col-md-6 text-right">
|
||||
<input type="number" class="form-control" v-model="settings.shopping_auto_sync" @change="saveSettings" />
|
||||
<input type="number" class="form-control" v-model="settings.shopping_auto_sync"
|
||||
@change="saveSettings"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sm mb-3">
|
||||
@ -466,7 +583,8 @@
|
||||
<div class="row">
|
||||
<div class="col col-md-6">{{ $t("shopping_add_onhand") }}</div>
|
||||
<div class="col col-md-6 text-right">
|
||||
<input type="checkbox" class="form-control settings-checkbox" v-model="settings.shopping_add_onhand" @change="saveSettings" />
|
||||
<input type="checkbox" class="form-control settings-checkbox"
|
||||
v-model="settings.shopping_add_onhand" @change="saveSettings"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sm mb-3">
|
||||
@ -479,7 +597,8 @@
|
||||
<div class="row">
|
||||
<div class="col col-md-6">{{ $t("shopping_recent_days") }}</div>
|
||||
<div class="col col-md-6 text-right">
|
||||
<input type="number" class="form-control" v-model="settings.shopping_recent_days" @change="saveSettings" />
|
||||
<input type="number" class="form-control" v-model="settings.shopping_recent_days"
|
||||
@change="saveSettings"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sm mb-3">
|
||||
@ -492,7 +611,8 @@
|
||||
<div class="row">
|
||||
<div class="col col-md-6">{{ $t("filter_to_supermarket") }}</div>
|
||||
<div class="col col-md-6 text-right">
|
||||
<input type="checkbox" class="form-control settings-checkbox" v-model="settings.filter_to_supermarket" @change="saveSettings" />
|
||||
<input type="checkbox" class="form-control settings-checkbox"
|
||||
v-model="settings.filter_to_supermarket" @change="saveSettings"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sm mb-3">
|
||||
@ -505,7 +625,8 @@
|
||||
<div class="row">
|
||||
<div class="col col-md-6">{{ $t("default_delay") }}</div>
|
||||
<div class="col col-md-6 text-right">
|
||||
<input type="number" class="form-control" min="1" v-model="settings.default_delay" @change="saveSettings" />
|
||||
<input type="number" class="form-control" min="1" v-model="settings.default_delay"
|
||||
@change="saveSettings"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sm mb-3">
|
||||
@ -518,7 +639,7 @@
|
||||
<div class="row">
|
||||
<div class="col col-md-6">{{ $t("csv_delim_label") }}</div>
|
||||
<div class="col col-md-6 text-right">
|
||||
<input class="form-control" v-model="settings.csv_delim" @change="saveSettings" />
|
||||
<input class="form-control" v-model="settings.csv_delim" @change="saveSettings"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sm mb-3">
|
||||
@ -531,7 +652,7 @@
|
||||
<div class="row">
|
||||
<div class="col col-md-6">{{ $t("csv_prefix_label") }}</div>
|
||||
<div class="col col-md-6 text-right">
|
||||
<input class="form-control" v-model="settings.csv_prefix" @change="saveSettings" />
|
||||
<input class="form-control" v-model="settings.csv_prefix" @change="saveSettings"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sm mb-3">
|
||||
@ -544,7 +665,8 @@
|
||||
<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" />
|
||||
<input type="checkbox" class="form-control settings-checkbox"
|
||||
v-model="settings.left_handed" @change="saveSettings"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sm mb-3">
|
||||
@ -561,20 +683,25 @@
|
||||
</b-tabs>
|
||||
|
||||
<transition name="slided-fade">
|
||||
<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)" v-if="current_tab === 0">
|
||||
<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);width: 105%;" v-if="current_tab === 0">
|
||||
<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>
|
||||
{{ $t("New Entry") }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<b-dropdown id="dropdown-dropup" block dropup variant="primary" class="shadow-none">
|
||||
<template #button-content> <i class="fas fa-download"></i> {{ $t("Export") }} </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" />
|
||||
<template #button-content><i class="fas fa-download"></i> {{ $t("Export") }}</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>
|
||||
@ -585,23 +712,32 @@
|
||||
<b-form-select v-model="group_by" :options="group_by_choices" size="sm"></b-form-select>
|
||||
</b-form-group>
|
||||
<b-form-group v-bind:label="$t('Supermarket')" label-for="popover-input-2" label-cols="6" class="mb-1">
|
||||
<b-form-select v-model="ui.selected_supermarket" :options="supermarkets" text-field="name" value-field="id" size="sm"></b-form-select>
|
||||
<b-form-select v-model="ui.selected_supermarket" :options="supermarkets" text-field="name"
|
||||
value-field="id" size="sm"></b-form-select>
|
||||
</b-form-group>
|
||||
<!-- TODO: shade filters red when they are actually filtering content -->
|
||||
<b-form-group v-bind:label="$t('ShowDelayed')" label-for="popover-input-3" content-cols="1" class="mb-1">
|
||||
<b-form-group v-bind:label="$t('ShowDelayed')" label-for="popover-input-3" content-cols="1"
|
||||
class="mb-1">
|
||||
<b-form-checkbox v-model="show_delay"></b-form-checkbox>
|
||||
</b-form-group>
|
||||
<b-form-group v-bind:label="$t('ShowUncategorizedFood')" label-for="popover-input-4" content-cols="1" class="mb-1" v-if="!ui.selected_supermarket">
|
||||
<b-form-group v-bind:label="$t('ShowUncategorizedFood')" label-for="popover-input-4" content-cols="1"
|
||||
class="mb-1" v-if="!ui.selected_supermarket">
|
||||
<b-form-checkbox v-model="show_undefined_categories"></b-form-checkbox>
|
||||
</b-form-group>
|
||||
<b-form-group v-bind:label="$t('SupermarketCategoriesOnly')" label-for="popover-input-5" content-cols="1" class="mb-1" v-if="ui.selected_supermarket">
|
||||
<b-form-group v-bind:label="$t('SupermarketCategoriesOnly')" label-for="popover-input-5"
|
||||
content-cols="1" class="mb-1" v-if="ui.selected_supermarket">
|
||||
<b-form-checkbox v-model="supermarket_categories_only"></b-form-checkbox>
|
||||
</b-form-group>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 1vh; min-width: 300px">
|
||||
<div class="col-12" style="text-align: right">
|
||||
<b-button size="sm" variant="primary" class="mx-1" @click="resetFilters">{{ $t("Reset") }}</b-button>
|
||||
<b-button size="sm" variant="secondary" class="mr-3" @click="$root.$emit('bv::hide::popover')">{{ $t("Close") }} </b-button>
|
||||
<b-button size="sm" variant="primary" class="mx-1" @click="resetFilters">{{
|
||||
$t("Reset")
|
||||
}}
|
||||
</b-button>
|
||||
<b-button size="sm" variant="secondary" class="mr-3" @click="$root.$emit('bv::hide::popover')">
|
||||
{{ $t("Close") }}
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
</b-popover>
|
||||
@ -610,7 +746,8 @@
|
||||
<ContextMenuItem>
|
||||
<b-input-group>
|
||||
<template #prepend>
|
||||
<span class="dropdown-item p-2 text-decoration-none" style="user-select: none !important"><i class="fas fa-cubes"></i> {{ $t("MoveCategory") }}</span>
|
||||
<span class="dropdown-item p-2 text-decoration-none" style="user-select: none !important"><i
|
||||
class="fas fa-cubes"></i> {{ $t("MoveCategory") }}</span>
|
||||
</template>
|
||||
<b-form-select
|
||||
class="form-control mt-1 mr-1"
|
||||
@ -639,7 +776,8 @@
|
||||
delayThis(contextData)
|
||||
"
|
||||
>
|
||||
<a class="dropdown-item p-2" href="#"><i class="fas fa-hourglass"></i> {{ $t("DelayFor", { hours: delay }) }}</a>
|
||||
<a class="dropdown-item p-2" href="#"><i class="fas fa-hourglass"></i>
|
||||
{{ $t("DelayFor", {hours: delay}) }}</a>
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
@click="
|
||||
@ -655,17 +793,20 @@
|
||||
deleteThis(contextData)
|
||||
"
|
||||
>
|
||||
<a class="dropdown-item p-2 text-danger" href="#"><i class="fas fa-trash"></i> {{ $t("Delete") }}</a>
|
||||
<a class="dropdown-item p-2 text-danger" href="#"><i class="fas fa-trash"></i> {{
|
||||
$t("Delete")
|
||||
}}</a>
|
||||
</ContextMenuItem>
|
||||
</template>
|
||||
</ContextMenu>
|
||||
<shopping-modal v-if="new_recipe.id" :recipe="new_recipe" :servings="parseInt(add_recipe_servings)" :modal_id="new_recipe.id" @finish="finishShopping" :list_recipe="new_recipe.list_recipe" />
|
||||
<shopping-modal v-if="new_recipe.id" :recipe="new_recipe" :servings="parseInt(add_recipe_servings)"
|
||||
:modal_id="new_recipe.id" @finish="finishShopping" :list_recipe="new_recipe.list_recipe"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue"
|
||||
import { BootstrapVue } from "bootstrap-vue"
|
||||
import {BootstrapVue} from "bootstrap-vue"
|
||||
import "bootstrap-vue/dist/bootstrap-vue.css"
|
||||
import VueCookies from "vue-cookies"
|
||||
|
||||
@ -681,8 +822,8 @@ import LookupInput from "@/components/Modals/LookupInput"
|
||||
import ShoppingModal from "@/components/Modals/ShoppingModal"
|
||||
import draggable from "vuedraggable"
|
||||
|
||||
import { ApiMixin, getUserPreference, StandardToasts, makeToast } from "@/utils/utils"
|
||||
import { ApiApiFactory } from "@/utils/openapi/api"
|
||||
import {ApiMixin, getUserPreference, StandardToasts, makeToast} from "@/utils/utils"
|
||||
import {ApiApiFactory} from "@/utils/openapi/api"
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
Vue.use(VueCookies)
|
||||
@ -736,8 +877,8 @@ export default {
|
||||
shopping_add_onhand: true,
|
||||
left_handed: false,
|
||||
},
|
||||
new_supermarket: { entrymode: false, value: undefined, editmode: undefined },
|
||||
new_category: { entrymode: false, value: undefined },
|
||||
new_supermarket: {entrymode: false, value: undefined, editmode: undefined},
|
||||
new_category: {entrymode: false, value: undefined},
|
||||
autosync_id: undefined,
|
||||
auto_sync_running: false, // track to not start a new sync before old one was finished
|
||||
auto_sync_blocked: false, // blocking auto sync while request to check item is still running
|
||||
@ -747,12 +888,13 @@ export default {
|
||||
fields: ["checked", "amount", "category", "unit", "food", "recipe", "details"],
|
||||
loading: true,
|
||||
entrymode: false,
|
||||
new_item: { amount: 1, unit: undefined, food: undefined, ingredient: undefined },
|
||||
new_item: {amount: 1, unit: undefined, food: undefined, ingredient: undefined},
|
||||
online: true,
|
||||
new_recipe: {
|
||||
id: undefined,
|
||||
},
|
||||
add_recipe_servings: 1,
|
||||
shopping_list_height: '60vh'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -789,7 +931,7 @@ export default {
|
||||
shopping_list = shopping_list.filter((x) => x?.food?.supermarket_category)
|
||||
}
|
||||
|
||||
var groups = { false: {}, true: {} } // force unchecked to always be first
|
||||
var groups = {false: {}, true: {}} // force unchecked to always be first
|
||||
if (this.ui.selected_supermarket) {
|
||||
// TODO: make nulls_first a user setting
|
||||
groups.false[this.$t("Undefined")] = {}
|
||||
@ -829,7 +971,7 @@ export default {
|
||||
},
|
||||
csvData() {
|
||||
return this.items.map((x) => {
|
||||
return { amount: x.amount, unit: x.unit?.name ?? "", food: x.food?.name ?? "" }
|
||||
return {amount: x.amount, unit: x.unit?.name ?? "", food: x.food?.name ?? ""}
|
||||
})
|
||||
},
|
||||
defaultDelay() {
|
||||
@ -881,7 +1023,13 @@ export default {
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
|
||||
entrymode: {
|
||||
handler() {
|
||||
if (this.entrymode) {
|
||||
document.getElementById('shoppinglist').scrollTop = 0
|
||||
}
|
||||
}
|
||||
},
|
||||
new_recipe: {
|
||||
handler() {
|
||||
this.add_recipe_servings = this.new_recipe.servings
|
||||
@ -941,16 +1089,16 @@ export default {
|
||||
addItem: function () {
|
||||
if (this.ui.entry_mode_simple) {
|
||||
if (this.new_item.ingredient !== "" && this.new_item.ingredient !== undefined) {
|
||||
this.genericPostAPI("api_ingredient_from_string", { text: this.new_item.ingredient }).then((result) => {
|
||||
this.genericPostAPI("api_ingredient_from_string", {text: this.new_item.ingredient}).then((result) => {
|
||||
let unit = null
|
||||
if (result.data.unit !== "") {
|
||||
unit = { name: result.data.unit }
|
||||
unit = {name: result.data.unit}
|
||||
}
|
||||
|
||||
this.new_item = {
|
||||
amount: result.data.amount,
|
||||
unit: unit,
|
||||
food: { name: result.data.food },
|
||||
food: {name: result.data.food},
|
||||
}
|
||||
this.addEntry()
|
||||
})
|
||||
@ -969,7 +1117,7 @@ export default {
|
||||
} else {
|
||||
console.log("no data returned")
|
||||
}
|
||||
this.new_item = { amount: 1, unit: undefined, food: undefined, ingredient: undefined }
|
||||
this.new_item = {amount: 1, unit: undefined, food: undefined, ingredient: undefined}
|
||||
this.clear += 1
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -1019,7 +1167,7 @@ export default {
|
||||
|
||||
if (Array.isArray(item)) {
|
||||
item = item.map((x) => {
|
||||
return { ...x, delay_until: delay_date }
|
||||
return {...x, delay_until: delay_date}
|
||||
})
|
||||
entries = item.map((x) => x.id)
|
||||
} else {
|
||||
@ -1028,7 +1176,7 @@ export default {
|
||||
}
|
||||
|
||||
entries.forEach((entry) => {
|
||||
promises.push(this.saveThis({ id: entry, delay_until: delay_date }, false))
|
||||
promises.push(this.saveThis({id: entry, delay_until: delay_date}, false))
|
||||
})
|
||||
Promise.all(promises).then(() => {
|
||||
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_UPDATE)
|
||||
@ -1074,7 +1222,7 @@ export default {
|
||||
},
|
||||
editSupermarket(s) {
|
||||
if (!s.editmode) {
|
||||
this.new_supermarket = { entrymode: false, value: undefined, editmode: undefined }
|
||||
this.new_supermarket = {entrymode: false, value: undefined, editmode: undefined}
|
||||
this.supermarkets.map((x) => (x.editmode = false))
|
||||
} else {
|
||||
this.new_supermarket.value = s
|
||||
@ -1095,7 +1243,7 @@ export default {
|
||||
let params = {}
|
||||
params.supermarket = this.ui.selected_supermarket
|
||||
|
||||
params.options = { query: { recent: 1 } }
|
||||
params.options = {query: {recent: 1}}
|
||||
if (autosync) {
|
||||
params.options.query["autosync"] = 1
|
||||
} else {
|
||||
@ -1130,7 +1278,7 @@ export default {
|
||||
})
|
||||
},
|
||||
getThis: function (id) {
|
||||
return this.genericAPI(this.Models.SHOPPING_CATEGORY, this.Actions.FETCH, { id: id })
|
||||
return this.genericAPI(this.Models.SHOPPING_CATEGORY, this.Actions.FETCH, {id: id})
|
||||
},
|
||||
mergeShoppingList: function (data) {
|
||||
this.items.map((x) =>
|
||||
@ -1164,7 +1312,7 @@ export default {
|
||||
this.updateFood(food, "supermarket_category").then((result) => {
|
||||
this.items = this.items.map((x) => {
|
||||
if (x.food.id === food.id) {
|
||||
return { ...x, food: { ...x.food, supermarket_category: supermarket_category } }
|
||||
return {...x, food: {...x.food, supermarket_category: supermarket_category}}
|
||||
} else {
|
||||
return x
|
||||
}
|
||||
@ -1187,7 +1335,8 @@ export default {
|
||||
})
|
||||
.then((entries) => {
|
||||
entries.forEach((x) => {
|
||||
api.destroyShoppingListEntry(x).then((result) => {})
|
||||
api.destroyShoppingListEntry(x).then((result) => {
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
@ -1253,7 +1402,7 @@ export default {
|
||||
if (update.checked) {
|
||||
completed_at = new Date().toISOString()
|
||||
}
|
||||
promises.push(this.saveThis({ id: id, checked: update.checked }, false))
|
||||
promises.push(this.saveThis({id: id, checked: update.checked}, false))
|
||||
|
||||
let item = this.items.filter((entry) => entry.id == id)[0]
|
||||
Vue.set(item, "checked", update.checked)
|
||||
@ -1293,13 +1442,13 @@ export default {
|
||||
updateServings(e, plan) {
|
||||
// maybe this needs debounced?
|
||||
let api = new ApiApiFactory()
|
||||
api.partialUpdateShoppingListRecipe(plan, { id: plan, servings: e }).then(() => {
|
||||
api.partialUpdateShoppingListRecipe(plan, {id: plan, servings: e}).then(() => {
|
||||
this.getShoppingList()
|
||||
})
|
||||
},
|
||||
addCategory: function () {
|
||||
let api = new ApiApiFactory()
|
||||
api.createSupermarketCategory({ name: this.new_category.value })
|
||||
api.createSupermarketCategory({name: this.new_category.value})
|
||||
.then((result) => {
|
||||
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
|
||||
this.shopping_categories.push(result.data)
|
||||
@ -1312,7 +1461,7 @@ export default {
|
||||
},
|
||||
addSupermarket: function () {
|
||||
let api = new ApiApiFactory()
|
||||
api.createSupermarket({ name: this.new_supermarket.value })
|
||||
api.createSupermarket({name: this.new_supermarket.value})
|
||||
.then((result) => {
|
||||
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
|
||||
this.supermarkets.push(result.data)
|
||||
@ -1332,7 +1481,7 @@ export default {
|
||||
var promises = []
|
||||
supermarket.category_to_supermarket.forEach((x, i) => {
|
||||
x.order = i
|
||||
promises.push(apiClient.partialUpdateSupermarketCategoryRelation(x.id, { order: i }))
|
||||
promises.push(apiClient.partialUpdateSupermarketCategoryRelation(x.id, {order: i}))
|
||||
})
|
||||
return Promise.all(promises).then(() => {
|
||||
return supermarket
|
||||
@ -1400,7 +1549,7 @@ export default {
|
||||
return item?.category?.name ?? item.name
|
||||
},
|
||||
updateOnlineStatus(e) {
|
||||
const { type } = e
|
||||
const {type} = e
|
||||
this.online = type === "online"
|
||||
},
|
||||
beforeDestroy() {
|
||||
@ -1412,18 +1561,26 @@ export default {
|
||||
},
|
||||
finishShopping() {
|
||||
this.add_recipe_servings = 1
|
||||
this.new_recipe = { id: undefined }
|
||||
this.new_recipe = {id: undefined}
|
||||
this.edit_recipe_list = undefined
|
||||
this.getShoppingList()
|
||||
},
|
||||
editRecipeList(e, r) {
|
||||
this.new_recipe = { id: r.recipe_mealplan.recipe, name: r.recipe_mealplan.recipe_name, servings: r.recipe_mealplan.servings, list_recipe: r.list_recipe }
|
||||
this.new_recipe = {
|
||||
id: r.recipe_mealplan.recipe,
|
||||
name: r.recipe_mealplan.recipe_name,
|
||||
servings: r.recipe_mealplan.servings,
|
||||
list_recipe: r.list_recipe
|
||||
}
|
||||
this.$nextTick(function () {
|
||||
this.$bvModal.show(`shopping_${this.new_recipe.id}`)
|
||||
})
|
||||
|
||||
// this.$bvModal.show(`shopping_${this.new_recipe.id}`)
|
||||
},
|
||||
handleResize: function () {
|
||||
this.shoppinglist_height = document.body.clientHeight - 115
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
hover: {
|
||||
@ -1476,7 +1633,8 @@ export default {
|
||||
}
|
||||
|
||||
.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);
|
||||
opacity: 0;
|
||||
}
|
||||
@ -1485,30 +1643,43 @@ export default {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#shoppinglist {
|
||||
#shoppinglist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
height: 60vh; /* TODO use proper fill height here to not render list underneath bottom buttons */
|
||||
padding-right: 8px !important;
|
||||
}
|
||||
height: calc(100% - 170px);
|
||||
}
|
||||
@media screen and (min-height: 700px) and (max-width: 768px) {
|
||||
|
||||
#id_base_container {
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#shoppinglist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
height: 72vh;
|
||||
padding-right: 8px !important;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#id_base_container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-checkbox {
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767.9px) {
|
||||
.recipe-table {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -127,4 +127,10 @@ export default {
|
||||
.meal-plan-card {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 767.9px) {
|
||||
.meal-plan-card {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,34 +1,43 @@
|
||||
<template>
|
||||
<div id="shopping_line_item">
|
||||
<b-row align-h="start">
|
||||
<b-col cols="2" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0" v-if="settings.left_handed">
|
||||
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked" @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>
|
||||
<div id="shopping_line_item" class="pt-1">
|
||||
<b-row align-h="start" v-touch:start="startHandler" v-touch:moving="moveHandler" v-touch:end="endHandler"
|
||||
ref="shopping_line_item" class="invis-border">
|
||||
<b-col cols="2" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0"
|
||||
v-if="settings.left_handed">
|
||||
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile"
|
||||
:checked="formatChecked" @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)">
|
||||
<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 ? 'dropdown-spacing' : ''"
|
||||
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-0 pl-1 dropdown-toggle-no-caret"
|
||||
>
|
||||
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-0 pl-1 dropdown-toggle-no-caret">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</button>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="1" class="px-1 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" />
|
||||
<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" >
|
||||
<b-col cols="8">
|
||||
<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 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">
|
||||
<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] }}  
|
||||
{{ x[0] }}
|
||||
@ -38,20 +47,27 @@
|
||||
<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">
|
||||
<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>
|
||||
<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="2" class="justify-content-start align-items-center d-flex d-md-none pl-0 pr-0" 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-col cols="2" class="justify-content-start align-items-center d-flex d-md-none pl-0 pr-0"
|
||||
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" />
|
||||
<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">
|
||||
@ -83,11 +99,14 @@
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row align-h="start">
|
||||
<b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0" v-if="settings.left_handed">
|
||||
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" />
|
||||
<b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0"
|
||||
v-if="settings.left_handed">
|
||||
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile"
|
||||
:checked="formatChecked" @change="updateChecked" :key="entries[0].id"/>
|
||||
</b-col>
|
||||
<b-col cols="2" md="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, e)">
|
||||
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"
|
||||
@click.stop="$emit('open-context-menu', $event, e)">
|
||||
<button
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
@ -100,7 +119,8 @@
|
||||
</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" />
|
||||
<input type="checkbox" class="form-control form-control-sm checkbox-control"
|
||||
:checked="formatChecked" @change="updateChecked" :key="entries[0].id"/>
|
||||
</b-col>
|
||||
<b-col cols="7" md="9">
|
||||
<b-row class="d-flex align-items-center h-100">
|
||||
@ -111,19 +131,23 @@
|
||||
{{ 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>
|
||||
<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" v-if="!settings.left_handed">
|
||||
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" />
|
||||
<b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none"
|
||||
v-if="!settings.left_handed">
|
||||
<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>
|
||||
<hr class="w-75 mt-1 mb-1 mt-md-3 mb-md-3" v-if="x !== entries.length - 1"/>
|
||||
<div class="pb-1 pb-md-4" v-if="x === entries.length - 1"></div>
|
||||
</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">
|
||||
<template #menu="{ contextData }" v-if="recipe">
|
||||
<ContextMenuItem>
|
||||
@ -132,7 +156,8 @@
|
||||
<ContextMenuItem @click="$refs.menu.close()">
|
||||
<b-form-group label-cols="9" content-cols="3" class="text-nowrap m-0 mr-2">
|
||||
<template #label>
|
||||
<a class="dropdown-item p-2" href="#"><i class="fas fa-pizza-slice"></i> {{ $t("Servings") }}</a>
|
||||
<a class="dropdown-item p-2" href="#"><i class="fas fa-pizza-slice"></i>
|
||||
{{ $t("Servings") }}</a>
|
||||
</template>
|
||||
<div @click.prevent.stop>
|
||||
<b-form-input class="mt-2" min="0" type="number" v-model="servings"></b-form-input>
|
||||
@ -141,38 +166,45 @@
|
||||
</ContextMenuItem>
|
||||
</template>
|
||||
</ContextMenu>
|
||||
<i class="fa fa-hourglass fa-lg" style="display: none; position: absolute" aria-hidden="true"
|
||||
ref="delay_icon"></i>
|
||||
<i class="fa fa-check fa-lg" style="display: none; position: absolute" aria-hidden="true" ref="check_icon"></i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue"
|
||||
import { BootstrapVue } from "bootstrap-vue"
|
||||
import {BootstrapVue} from "bootstrap-vue"
|
||||
import "bootstrap-vue/dist/bootstrap-vue.css"
|
||||
import ContextMenu from "@/components/ContextMenu/ContextMenu"
|
||||
import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem"
|
||||
import { ApiMixin } from "@/utils/utils"
|
||||
import {ApiMixin} from "@/utils/utils"
|
||||
import RecipeCard from "./RecipeCard.vue"
|
||||
import Vue2TouchEvents from "vue2-touch-events"
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
Vue.use(Vue2TouchEvents)
|
||||
|
||||
export default {
|
||||
// TODO ApiGenerator doesn't capture and share error information - would be nice to share error details when available
|
||||
// or i'm capturing it incorrectly
|
||||
name: "ShoppingLineItem",
|
||||
mixins: [ApiMixin],
|
||||
components: { RecipeCard, ContextMenu, ContextMenuItem },
|
||||
components: {RecipeCard, ContextMenu, ContextMenuItem},
|
||||
props: {
|
||||
entries: {
|
||||
type: Array,
|
||||
},
|
||||
settings: Object,
|
||||
groupby: { type: String },
|
||||
groupby: {type: String},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showDetails: false,
|
||||
recipe: undefined,
|
||||
servings: 1,
|
||||
dragStartX: 0,
|
||||
distance_left: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -249,6 +281,71 @@ export default {
|
||||
timeStyle: "short",
|
||||
}).format(Date.parse(datetime))
|
||||
},
|
||||
startHandler: function (event) {
|
||||
if (event.changedTouches.length > 0) {
|
||||
this.dragStartX = event.changedTouches[0].clientX
|
||||
}
|
||||
},
|
||||
getOffset(el) {
|
||||
let rect = el.getBoundingClientRect();
|
||||
return {
|
||||
left: rect.left + window.scrollX,
|
||||
top: rect.top + window.scrollY,
|
||||
right: rect.right - window.scrollX,
|
||||
};
|
||||
},
|
||||
moveHandler: function (event) {
|
||||
let item = this.$refs['shopping_line_item'];
|
||||
this.distance_left = event.changedTouches[0].clientX - this.dragStartX;
|
||||
item.style.marginLeft = this.distance_left
|
||||
item.style.marginRight = -this.distance_left
|
||||
item.style.backgroundColor = '#ddbf86'
|
||||
item.style.border = "1px solid #000"
|
||||
|
||||
let delay_icon = this.$refs['delay_icon']
|
||||
let check_icon = this.$refs['check_icon']
|
||||
|
||||
let color_factor = Math.abs(this.distance_left) / 100
|
||||
|
||||
if (this.distance_left > 0) {
|
||||
item.parentElement.parentElement.style.backgroundColor = 'rgba(130,170,139,0)'.replace(/[^,]+(?=\))/, color_factor)
|
||||
check_icon.style.display = "block"
|
||||
check_icon.style.left = this.getOffset(item.parentElement.parentElement).left + 40
|
||||
check_icon.style.top = this.getOffset(item.parentElement.parentElement).top - 92
|
||||
check_icon.style.opacity = color_factor - 0.3
|
||||
} else {
|
||||
item.parentElement.parentElement.style.backgroundColor = 'rgba(185,135,102,0)'.replace(/[^,]+(?=\))/, color_factor)
|
||||
delay_icon.style.display = "block"
|
||||
console.log(item.parentElement.parentElement.clientWidth)
|
||||
delay_icon.style.left = this.getOffset(item.parentElement.parentElement).right - 40
|
||||
delay_icon.style.top = this.getOffset(item.parentElement.parentElement).top - 92
|
||||
delay_icon.style.opacity = color_factor - 0.3
|
||||
}
|
||||
},
|
||||
endHandler: function (event) {
|
||||
let item = this.$refs['shopping_line_item'];
|
||||
item.removeAttribute('style');
|
||||
item.parentElement.parentElement.removeAttribute('style');
|
||||
|
||||
let delay_icon = this.$refs['delay_icon']
|
||||
let check_icon = this.$refs['check_icon']
|
||||
|
||||
delay_icon.style.display = "none"
|
||||
check_icon.style.display = "none"
|
||||
|
||||
if (Math.abs(this.distance_left) > window.screen.width / 6) {
|
||||
if (this.distance_left > 0) {
|
||||
let checked = false;
|
||||
this.entries.forEach((cur) => {
|
||||
checked = cur.checked
|
||||
})
|
||||
let update = {entries: this.entries.map((x) => x.id), checked: !checked}
|
||||
this.$emit("update-checkbox", update)
|
||||
} else {
|
||||
this.$emit("update-delaythis", this.entries)
|
||||
}
|
||||
}
|
||||
},
|
||||
formatOneAmount: function (item) {
|
||||
return item?.amount ?? 1
|
||||
},
|
||||
@ -289,7 +386,7 @@ export default {
|
||||
return [this.$t("Added_by"), item?.created_by.username, "@", this.formatDate(item.created_at)].join(" ")
|
||||
},
|
||||
openRecipeCard: function (e, item) {
|
||||
this.genericAPI(this.Models.RECIPE, this.Actions.FETCH, { id: item.recipe_mealplan.recipe }).then((result) => {
|
||||
this.genericAPI(this.Models.RECIPE, this.Actions.FETCH, {id: item.recipe_mealplan.recipe}).then((result) => {
|
||||
let recipe = result.data
|
||||
recipe.steps = undefined
|
||||
this.recipe = true
|
||||
@ -299,10 +396,11 @@ export default {
|
||||
updateChecked: function (e, item) {
|
||||
let update = undefined
|
||||
if (!item) {
|
||||
update = { entries: this.entries.map((x) => x.id), checked: !this.formatChecked }
|
||||
update = {entries: this.entries.map((x) => x.id), checked: !this.formatChecked}
|
||||
} else {
|
||||
update = { entries: [item], checked: !item.checked }
|
||||
update = {entries: [item], checked: !item.checked}
|
||||
}
|
||||
console.log(update)
|
||||
this.$emit("update-checkbox", update)
|
||||
},
|
||||
},
|
||||
@ -351,4 +449,8 @@ export default {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.invis-border {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user