enrecipes/app/components/modal/ActionDialogWithSearch.vue

111 lines
2.7 KiB
Vue
Raw Normal View History

2020-11-15 10:51:10 +00:00
<template>
2021-04-12 18:09:48 +00:00
<Page
@loaded="transparentPage"
backgroundColor="transparent"
:class="appTheme"
>
2021-04-01 10:55:35 +00:00
<GridLayout columns="*" rows="auto, auto, *, auto" class="modal">
<Label class="title" :text="title | L" />
2021-02-28 15:10:26 +00:00
<StackLayout
2021-04-01 10:55:35 +00:00
row="1"
2021-02-28 15:10:26 +00:00
v-if="filteredRecipes.length || searchQuery"
2021-04-01 10:55:35 +00:00
class="input"
2021-02-28 15:10:26 +00:00
>
2021-04-01 10:55:35 +00:00
<TextField
class="modalInput"
2021-04-12 18:09:48 +00:00
:hint="'ser' | L"
2021-04-01 10:55:35 +00:00
v-model="searchQuery"
/>
</StackLayout>
2021-04-12 18:09:48 +00:00
<ListView row="2" for="recipe in filteredRecipes">
2021-04-01 10:55:35 +00:00
<v-template>
2021-02-28 15:10:26 +00:00
<Label
2021-04-01 10:55:35 +00:00
class="listItem"
:text="recipe.title"
@touch="touch($event, recipe)"
2021-02-28 15:10:26 +00:00
/>
2021-04-01 10:55:35 +00:00
</v-template>
</ListView>
<Label
row="2"
class="noResInfo"
v-if="!filteredRecipes.length && !searchQuery"
:text="'recListEmp' | L"
/>
<Label
row="2"
class="noResInfo"
v-if="!filteredRecipes.length && searchQuery"
:text="'noRecs' | L"
/>
<GridLayout row="3" columns="auto, *, auto" class="actions">
<Button
2021-02-28 15:10:26 +00:00
v-if="action"
2021-04-01 10:55:35 +00:00
class="text sm"
:text="action | L"
2021-02-28 15:10:26 +00:00
@tap="$modal.close(action)"
/>
2021-04-01 10:55:35 +00:00
<Button
2021-02-28 15:10:26 +00:00
col="2"
2021-04-01 10:55:35 +00:00
class="text sm"
2021-02-28 15:10:26 +00:00
:text="'CANCEL' | L"
@tap="$modal.close(false)"
/>
</GridLayout>
</GridLayout>
2021-02-28 15:10:26 +00:00
</Page>
2020-11-15 10:51:10 +00:00
</template>
<script>
2021-02-28 15:10:26 +00:00
import { mapState } from "vuex";
2020-11-15 10:51:10 +00:00
export default {
2021-04-01 10:55:35 +00:00
props: ["title", "recipes", "height", "action"],
2020-11-15 10:51:10 +00:00
data() {
return {
2020-12-29 10:35:19 +00:00
searchQuery: "",
2021-02-28 15:10:26 +00:00
};
2020-11-15 10:51:10 +00:00
},
computed: {
2021-04-01 10:55:35 +00:00
...mapState(["icon", "appTheme"]),
2020-11-15 10:51:10 +00:00
filteredRecipes() {
2021-02-28 15:10:26 +00:00
return this.recipes
.map((e, i) => {
return {
id: e.id,
title: e.title,
cuisine: e.cuisine,
category: e.category,
tags: e.tags.map((e) => e.toLowerCase()).join(),
ingredients: e.ingredients.map((e) => e.item.toLowerCase()).join(),
};
})
.filter((e) => this.recipeFilter(e));
2020-11-15 10:51:10 +00:00
},
},
methods: {
2021-02-28 15:10:26 +00:00
tapAction(recipe) {
this.$modal.close(recipe.id);
2020-11-15 10:51:10 +00:00
},
2021-02-28 15:10:26 +00:00
centerLabel(args) {
args.object.android.setGravity(16);
2020-11-15 10:51:10 +00:00
},
2021-02-28 15:10:26 +00:00
recipeFilter(e) {
let searchQuery = this.searchQuery.toLowerCase();
return (
e.title.includes(searchQuery) ||
e.cuisine.includes(searchQuery) ||
e.category.includes(searchQuery) ||
e.tags.includes(searchQuery) ||
e.ingredients.includes(searchQuery)
);
2020-12-29 10:35:19 +00:00
},
2021-04-01 10:55:35 +00:00
touch({ object, action }, recipe) {
object.className = action.match(/down|move/)
? "listItem fade"
: "listItem";
if (action == "up") this.tapAction(recipe);
},
2020-11-15 10:51:10 +00:00
},
2021-02-28 15:10:26 +00:00
};
2020-11-15 10:51:10 +00:00
</script>