swiping working for all items

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

View File

@ -400,10 +400,11 @@
<bottom-navigation-bar active-view="view_shopping">
<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-form-input v-model="new_item.ingredient" :placeholder="$t('Food')"
@keyup.enter="addItem"></b-form-input>
@ -422,8 +423,9 @@
></generic-multiselect>
</template>
</b-col>
</b-row>
</div>
</template>
<template #custom_create_functions>

View File

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