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

swiping working for all items

Browse Source
This commit is contained in:
vabene1111 2024-01-14 12:04:52 +08:00
parent 5a0ca3f4e5
commit 1692230f01
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -400,10 +400,11 @@
<bottom-navigation-bar active-view="view_shopping"> <bottom-navigation-bar active-view="view_shopping">
<template #custom_nav_content v-if="current_tab <= 1"> <template #custom_nav_content v-if="current_tab <= 1">
<div class="d-flex flex-row justify-content-around mb-3"> <b-row class="pr-1 pl-1 mb-3">
<b-col cols="12">
<template v-if="current_tab===0">
<template v-if="current_tab===0">
<b-input-group> <b-input-group>
<b-form-input v-model="new_item.ingredient" :placeholder="$t('Food')" <b-form-input v-model="new_item.ingredient" :placeholder="$t('Food')"
@keyup.enter="addItem"></b-form-input> @keyup.enter="addItem"></b-form-input>
@ -422,8 +423,9 @@
></generic-multiselect> ></generic-multiselect>
</template> </template>
</b-col>
</b-row>
</div>
</template> </template>
<template #custom_create_functions> <template #custom_create_functions>

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

@ -1,5 +1,5 @@
<template> <template>
<div id="shopping_line_item" class="swipe-container" @touchend="handleSwipe()" <div class="swipe-container" :id="item_container_id" @touchend="handleSwipe()"
v-if="(useUserPreferenceStore().device_settings.shopping_show_checked_entries || !is_checked) && (useUserPreferenceStore().device_settings.shopping_show_delayed_entries || !is_delayed)" v-if="(useUserPreferenceStore().device_settings.shopping_show_checked_entries || !is_checked) && (useUserPreferenceStore().device_settings.shopping_show_delayed_entries || !is_delayed)"
> >
<div class="swipe-action" :class="{'bg-success': !is_checked , 'bg-warning': is_checked }"> <div class="swipe-action" :class="{'bg-success': !is_checked , 'bg-warning': is_checked }">
@ -141,6 +141,13 @@ export default {
} }
}, },
computed: { computed: {
item_container_id: function () {
let id = 'id_sli_'
for (let i in this.entries) {
id += i + '_'
}
return id
},
is_checked: function () { is_checked: function () {
for (let i in this.entries) { for (let i in this.entries) {
if (!this.entries[i].checked) { if (!this.entries[i].checked) {
@ -272,7 +279,7 @@ export default {
*/ */
handleSwipe: function () { handleSwipe: function () {
const minDistance = 80; const minDistance = 80;
const container = document.querySelector('.swipe-container'); const container = document.querySelector('#' + this.item_container_id);
// get the distance the user swiped // get the distance the user swiped
const swipeDistance = container.scrollLeft - container.clientWidth; const swipeDistance = container.scrollLeft - container.clientWidth;
if (swipeDistance < minDistance * -1) { if (swipeDistance < minDistance * -1) {