enrecipes/app/components/modals/ActionWithSearch.vue

<template>
  <Page
    @loaded="transparentPage"
    backgroundColor="transparent"
    :class="theme"
  >
    <GridLayout columns="*" rows="auto, auto, *, auto" class="modal">
      <RLabel class="title" :text="title | L" />
      <StackLayout
        row="1"
        :hidden="!filteredRecipes.length && !searchQuery"
        class="input"
      >
        <TextField
          @loaded="setGravity"
          class="modalInput"
          :hint="'ser' | L"
          v-model="searchQuery"
        />
      </StackLayout>
      <ListView row="2" for="recipe in filteredRecipes">
        <v-template>
          <RLabel
            class="listItem"
            :text="recipe.title"
            @touch="touch($event, recipe)"
          />
        </v-template>
      </ListView>
      <Label
        row="2"
        class="noResInfo"
        :hidden="recipes.length"
        :text="'recListEmp' | L"
      />
      <Label
        row="2"
        class="noResInfo"
        :hidden="filteredRecipes.length || !searchQuery"
        :text="'noRecs' | L"
      />
      <RGridLayout :rtl="RTL" row="3" columns="auto, *, auto" class="actions">
        <Button
          :hidden="!action"
          class="text sm"
          :text="action | L"
          @tap="$modal.close(action)"
        />
        <Button
          col="2"
          class="text sm"
          :text="'cBtn' | L"
          @tap="$modal.close(0)"
        />
      </RGridLayout>
    </GridLayout>
  </Page>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["title", "recipes", "height", "action"],
  data() {
    return {
      searchQuery: "",
    };
  },
  computed: {
    ...mapState(["icon", "theme", "RTL"]),
    filteredRecipes() {
      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));
    },
  },
  methods: {
    tapAction(recipe) {
      this.$modal.close(recipe.id);
    },
    centerLabel({ object }) {
      object.android.setGravity(16);
    },
    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)
      );
    },
    touch({ object, action }, recipe) {
      object.className = action.match(/down|move/)
        ? "listItem fade"
        : "listItem ";
      if (action == "up") this.tapAction(recipe);
    },
  },
};
</script>