enrecipes/app/components/App.vue

<template>
  <Page
    @loaded="onPageLoad"
    actionBarHidden="true"
    :androidStatusBarBackground="appTheme == 'Light' ? '#f0f0f0' : '#1A1A1A'"
  >
    <Drawer
      @loaded="drawerLoad"
      :gestureEnabled="gestures"
      leftSwipeDistance="32"
    >
      <GridLayout ~leftDrawer rows="*, auto" columns="*" width="280" class="sd">
        <StackLayout row="0">
          <GridLayout
            rows="48"
            columns="auto, *, auto"
            v-for="(item, index) in topmenu"
            :key="index"
            class="sd-item mdr"
            :class="{
              selected: currentComponent === item.component,
            }"
            @tap="navigateTo(item.component, item.component, false)"
          >
            <Label col="0" class="er" :text="icon[item.icon]" />
            <Label col="1" :text="`${item.title}` | L" />
            <Label
              class="recipeCount"
              v-if="getRecipeCount(item.title)"
              :text="getRecipeCount(item.title)"
              col="2"
            />
          </GridLayout>
          <GridLayout
            class="sd-group-header"
            rows="auto"
            columns="*, auto"
            v-if="cuisinesWithRecipes.length"
          >
            <Label
              class="filterPath"
              verticalAlignment="center"
              col="0"
              :text="getCurrentPath | L"
              textWrap="true"
            />
            <MDButton
              :visibility="selectedCuisine ? 'visible' : 'hidden'"
              variant="text"
              @tap="previousRecipeFilter"
              class="er"
              col="2"
              :text="icon.back"
            />
          </GridLayout>
          <ScrollView height="100%">
            <StackLayout>
              <GridLayout
                v-for="(item, index) in getRecipeList"
                :key="index"
                class="sd-item mdr"
                :class="{
                  selected: selectedTag == item,
                }"
                columns="auto, *, auto"
                @tap="setFilter && setRecipeFilter(item)"
              >
                <Label col="0" class="er" :text="icon[selectedFilterType]" />
                <Label col="1" :text="`${item}` | L" />
                <Label
                  class="recipeCount"
                  :text="getRecipeCount(item)"
                  col="2"
                />
              </GridLayout>
              <GridLayout
                v-if="selectedFilterType == 'tag' && !tagsWithRecipes.length"
                columns="*"
                rows="*"
              >
                <Label class="noTags" :text="'noTs' | L" textWrap="true" />
              </GridLayout>
            </StackLayout>
          </ScrollView>
        </StackLayout>
        <StackLayout row="1">
          <GridLayout
            rows="48"
            columns="auto, *"
            class="sd-item mdr"
            marginTop="8"
            :class="{
              selected: currentComponent == 'MealPlanner',
            }"
            @tap="navigateTo(MealPlanner, 'MealPlanner', true)"
          >
            <Label col="0" class="er" :text="icon.cal" />
            <Label col="2" :text="'planner' | L" />
          </GridLayout>

          <!-- <GridLayout
            rows="48"
            columns="auto, *"
            class="sd-item tb mdr"
            :class="{
              selected: currentComponent == 'GroceryList',
            }"
            @tap="navigateTo(GroceryList, 'GroceryList', true)"
          >
            <Label col="0" class="er" :text="icon.bag" />
            <Label col="2" :text="'grocery' | L" />
          </GridLayout>
          <GridLayout
            rows="48"
            columns="auto, *"
            class="sd-item tb mdr"
            :class="{
              selected: currentComponent == 'GroceryList',
            }"
            @tap="navigateTo(GroceryList, 'GroceryList', true)"
          >
            <Label col="0" class="er" :text="icon.price" />
            <Label col="2" :text="'Price List' | L" />
          </GridLayout> -->
          <GridLayout
            class="sd-item mdr"
            :class="{
              selected: currentComponent == 'Settings',
            }"
            rows="48"
            columns="auto, *"
            @tap="navigateTo(Settings, 'Settings', true)"
          >
            <Label class="er" col="0" :text="icon.cog" />
            <Label col="2" :text="'Settings' | L" />
          </GridLayout>
        </StackLayout>
      </GridLayout>
      <Frame ~mainContent id="main-frame">
        <EnRecipes
          ref="enrecipes"
          :filterFavourites="filterFavourites"
          :filterTrylater="filterTrylater"
          :selectedCuisine="selectedCuisine"
          :selectedCategory="selectedCategory"
          :selectedTag="selectedTag"
          :closeDrawer="closeDrawer"
          :hijackGlobalBackEvent="hijackGlobalBackEvent"
          :releaseGlobalBackEvent="releaseGlobalBackEvent"
          @backToHome="backToHome"
          :showDrawer="showDrawer"
          @selectModeOn="selectModeOn"
        />
      </Frame>
    </Drawer>
  </Page>
</template>

<script>
import {
  ApplicationSettings,
  AndroidApplication,
  Application,
} from "@nativescript/core";
import Theme from "@nativescript/theme";
import { localize } from "@nativescript/localize";
import { mapActions, mapState } from "vuex";
import EnRecipes from "./EnRecipes";
import ViewRecipe from "./ViewRecipe";
import MealPlanner from "./MealPlanner";
import GroceryList from "./GroceryList";
import Settings from "./Settings";
let filterTimer;
export default {
  data() {
    return {
      selectedCuisine: null,
      selectedCategory: null,
      selectedTag: null,
      selectedFilterType: "cuisine",
      filterFavourites: false,
      filterTrylater: false,
      MealPlanner: MealPlanner,
      GroceryList: GroceryList,
      Settings: Settings,
      topmenu: [
        {
          title: "EnRecipes",
          component: "EnRecipes",
          icon: "home",
        },
        {
          title: "trylater",
          component: "Try Later",
          icon: "try",
        },
        {
          title: "favourites",
          component: "Favourites",
          icon: "fav",
        },
      ],
      appTheme: "Light",
      setFilter: true,
      gestures: true,
      drawer: null,
    };
  },
  components: {
    EnRecipes,
    ViewRecipe,
    MealPlanner,
    GroceryList,
    Settings,
  },
  computed: {
    ...mapState([
      "icon",
      "recipes",
      "cuisines",
      "categories",
      "yieldUnits",
      "mealPlans",
      "currentComponent",
    ]),
    getCurrentPath() {
      let path = null;
      if (this.selectedCuisine) path = localize(this.selectedCuisine);
      else path = "cuis";
      if (this.selectedCategory)
        path += " > " + localize(this.selectedCategory);
      if (this.selectedTag) path += " > " + localize(this.selectedTag);
      return path;
    },
    getRecipeList() {
      switch (this.selectedFilterType) {
        case "cuisine":
          return this.cuisinesWithRecipes;
          break;
        case "category":
          return this.categoriesWithRecipes;
          break;
        case "tag":
          return this.tagsWithRecipes;
          break;
      }
    },
    cuisinesWithRecipes() {
      let arr = this.recipes.map((e) => e.cuisine).sort();
      return arr.length ? ["allCuis", ...new Set(arr)] : [];
    },
    categoriesWithRecipes() {
      let arr = this.recipes
        .map(
          (e) =>
            (this.selectedCuisine === "allCuis" ||
              e.cuisine === this.selectedCuisine) &&
            e.category
        )
        .filter((e) => e)
        .sort();
      return arr.length ? ["allCats", ...new Set(arr)] : [];
    },
    tagsWithRecipes() {
      let arr = this.recipes
        .map((e) => {
          if (
            this.selectedCuisine === "allCuis" &&
            this.selectedCategory === "allCats" &&
            e.tags.length
          )
            return e.tags;
          else if (
            this.selectedCuisine === "allCuis" &&
            e.category === this.selectedCategory &&
            e.tags.length
          )
            return e.tags;
          else if (
            this.selectedCategory === "allCats" &&
            e.cuisine === this.selectedCuisine &&
            e.tags.length
          )
            return e.tags;
          else if (
            e.category === this.selectedCategory &&
            e.cuisine === this.selectedCuisine &&
            e.tags.length
          )
            return e.tags;
        })
        .flat()
        .filter((e) => e)
        .sort();
      let showAllTags =
        this.selectedCuisine === "allCuis" &&
        this.selectedCategory === "allCats";
      return arr.length
        ? [!showAllTags && "allTs", ...new Set(arr)].filter((e) => e)
        : [];
    },
  },
  methods: {
    ...mapActions([
      "setCurrentComponentAction",
      "initializeListItems",
      "initializeRecipes",
      "initializeMealPlans",
      "setShakeAction",
      "setLayout",
    ]),
    onPageLoad() {
      if (this.appTheme === "Light") {
        const View = android.view.View;
        const window = Application.android.startActivity.getWindow();
        const decorView = window.getDecorView();
        decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
      }
    },
    drawerLoad(args) {
      this.drawer = args.object;
    },

    // HELPERS
    setRecipeFilter(item) {
      this.setFilter = this.filterFavourites = this.filterTrylater = false;
      this.$navigateBack({
        frame: "main-frame",
        backstackVisible: false,
      });
      setTimeout((e) => {
        if (this.selectedCuisine == null) {
          this.selectedCuisine = item;
          this.selectedFilterType = "category";
        } else if (this.selectedCategory == null) {
          this.selectedCategory = item;
          this.selectedFilterType = "tag";
          if (!this.tagsWithRecipes.length) this.closeDrawer();
        } else {
          this.selectedTag = item;
          this.closeDrawer();
        }
        this.setFilter = true;
      }, 250);
      this.setCurrentComponentAction("Filtered recipes");
    },
    previousRecipeFilter() {
      if (this.selectedCategory) {
        this.selectedFilterType = "category";
        this.selectedTag = this.selectedCategory = null;
        this.setCurrentComponentAction("Filtered recipes");
      } else {
        this.selectedFilterType = "cuisine";
        this.selectedCuisine = null;
        this.setCurrentComponentAction("EnRecipes");
      }
    },
    showDrawer() {
      this.drawer.open();
    },
    closeDrawer() {
      this.drawer.close();
    },
    getRecipeCount(arg) {
      let count = "";
      switch (arg) {
        case "EnRecipes":
          count = this.recipes.length;
          break;
        case "trylater":
          count = this.recipes.filter((e) => !e.tried).length;
          break;
        case "favourites":
          count = this.recipes.filter((e) => e.isFavorite).length;
          break;
        default: {
          switch (this.selectedFilterType) {
            case "cuisine":
              count = this.recipes.filter((e) =>
                arg === "allCuis" ? e.cuisine : e.cuisine === arg
              ).length;
              break;
            case "category":
              count = this.recipes.filter((e) =>
                this.selectedCuisine === "allCuis"
                  ? arg === "allCats"
                    ? e.category
                    : e.category === arg
                  : arg === "allCats"
                  ? e.cuisine === this.selectedCuisine && e.category
                  : e.cuisine === this.selectedCuisine && e.category === arg
              ).length;
              break;
            case "tag":
              count = this.recipes.filter((e) => {
                if (
                  this.selectedCuisine === "allCuis" &&
                  this.selectedCategory === "allCats"
                ) {
                  return e.tags.includes(arg) || arg === "allTs";
                } else if (
                  this.selectedCuisine === "allCuis" &&
                  e.category === this.selectedCategory
                ) {
                  return e.tags.includes(arg) || arg === "allTs";
                } else if (
                  this.selectedCategory === "allCats" &&
                  e.cuisine === this.selectedCuisine
                ) {
                  return e.tags.includes(arg) || arg === "allTs";
                } else if (
                  e.category === this.selectedCategory &&
                  e.cuisine === this.selectedCuisine
                ) {
                  return e.tags.includes(arg) || arg === "allTs";
                }
              }).length;
              break;
          }
        }
      }
      return count;
    },
    selectModeOn(bool) {
      this.gestures = bool;
    },
    // NAVIGATION HANDLERS
    hijackGlobalBackEvent() {
      AndroidApplication.on(
        AndroidApplication.activityBackPressedEvent,
        this.globalBackEvent
      );
    },
    releaseGlobalBackEvent() {
      AndroidApplication.off(
        AndroidApplication.activityBackPressedEvent,
        this.globalBackEvent
      );
    },
    globalBackEvent(args) {
      if (this.drawer && this.drawer.isOpened()) {
        args.cancel = true;
        this.closeDrawer();
      } else if (
        ["Favourites", "Try Later", "Filtered recipes"].includes(
          this.currentComponent
        )
      ) {
        args.cancel = true;
        this.backToHome();
      }
    },
    backToHome() {
      this.setCurrentComponentAction("EnRecipes");
      this.filterFavourites = this.filterTrylater = false;
      this.selectedTag = this.selectedCategory = this.selectedCuisine = null;
      this.selectedFilterType = "cuisine";
    },
    navigateTo(to, title, isTrueComponent) {
      if (title !== this.currentComponent) {
        if (isTrueComponent) {
          this.$navigateTo(to, {
            backstackVisible: true,
          });
          this.closeDrawer();
        } else {
          this.setCurrentComponentAction(to);
          this.$navigateBack({
            frame: "main-frame",
            backstackVisible: false,
          });
          this.filterFavourites = to === "Favourites";
          this.filterTrylater = to === "Try Later";
          this.closeDrawer();
          this.selectedTag = this.selectedCategory = this.selectedCuisine = null;
          this.selectedFilterType = "cuisine";
        }
      } else {
        this.closeDrawer();
      }
    },
  },
  created() {
    this.setLayout(ApplicationSettings.getString("layout", "detailed"));
    this.appTheme = ApplicationSettings.getString("appTheme", "Light");
    setTimeout((e) => {
      Theme.setMode(Theme[this.appTheme]);
    }, 10);
    if (!this.recipes.length) this.initializeRecipes();
    this.initializeListItems();
    if (!this.mealPlans.length) this.initializeMealPlans();
    this.setShakeAction(ApplicationSettings.getBoolean("shakeEnabled", true));
  },
};
</script>