2021-04-01 10:55:35 +00:00
|
|
|
<template>
|
2021-06-15 11:04:42 +00:00
|
|
|
<Page @loaded="pgLoad" backgroundColor="transparent" :class="theme">
|
2021-04-01 10:55:35 +00:00
|
|
|
<GridLayout rows="auto, auto, *, auto" columns="*" class="modal">
|
2021-06-15 11:04:42 +00:00
|
|
|
<RLabel class="title a" :text="`fltr` | L" />
|
2021-04-01 10:55:35 +00:00
|
|
|
<ScrollView orientation="horizontal" row="1" @loaded="onScrollLoad">
|
2021-06-15 11:04:42 +00:00
|
|
|
<RStackLayout :rtl="RTL" class="filters" orientation="horizontal">
|
2021-04-01 10:55:35 +00:00
|
|
|
<GridLayout
|
2021-06-18 12:52:03 +00:00
|
|
|
rows="32"
|
|
|
|
columns="32, auto"
|
2021-06-15 11:04:42 +00:00
|
|
|
class="segment rtl"
|
2021-04-01 10:55:35 +00:00
|
|
|
v-for="(item, index) in pathList"
|
|
|
|
:key="index"
|
2021-06-18 12:52:03 +00:00
|
|
|
:class="{ select: filter === item.type }"
|
2021-04-01 10:55:35 +00:00
|
|
|
@touch="touchSelector($event, item.type)"
|
|
|
|
>
|
2021-06-18 12:52:03 +00:00
|
|
|
<Label class="ico tc vc" :text="icon[item.type]" />
|
2021-06-15 11:04:42 +00:00
|
|
|
<Label
|
|
|
|
:hidden="!item.title"
|
2021-06-18 12:52:03 +00:00
|
|
|
class="v vc"
|
|
|
|
:class="{ f: RTL }"
|
2021-06-15 11:04:42 +00:00
|
|
|
:text="item.title"
|
|
|
|
col="1"
|
|
|
|
/>
|
2021-04-01 10:55:35 +00:00
|
|
|
</GridLayout>
|
2021-06-15 11:04:42 +00:00
|
|
|
</RStackLayout>
|
2021-04-01 10:55:35 +00:00
|
|
|
</ScrollView>
|
2021-06-15 11:04:42 +00:00
|
|
|
<ListView row="2" class="options" for="item in filterList">
|
2021-04-01 10:55:35 +00:00
|
|
|
<v-template>
|
2021-06-15 11:04:42 +00:00
|
|
|
<RLabel
|
2021-04-01 10:55:35 +00:00
|
|
|
class="listItem"
|
|
|
|
verticalAlignment="center"
|
|
|
|
col="1"
|
|
|
|
:text="item | L"
|
|
|
|
@touch="touch($event, item)"
|
|
|
|
/>
|
|
|
|
</v-template>
|
|
|
|
</ListView>
|
2021-06-15 11:04:42 +00:00
|
|
|
<RGridLayout
|
|
|
|
:rtl="RTL"
|
|
|
|
row="3"
|
|
|
|
columns="auto, *, auto, auto"
|
|
|
|
class="actions"
|
|
|
|
>
|
2021-06-18 12:52:03 +00:00
|
|
|
<Button class="text tb st fb" :text="'rstBtn' | L" @tap="resetFilter" />
|
2021-04-01 10:55:35 +00:00
|
|
|
<Button
|
|
|
|
col="2"
|
2021-06-18 12:52:03 +00:00
|
|
|
class="text tb st fb"
|
2021-04-01 10:55:35 +00:00
|
|
|
:text="'cBtn' | L"
|
|
|
|
@tap="$modal.close()"
|
|
|
|
/>
|
|
|
|
<Button
|
|
|
|
col="3"
|
2021-06-18 12:52:03 +00:00
|
|
|
class="text tb st fb"
|
2021-04-01 10:55:35 +00:00
|
|
|
:text="'apply' | L"
|
|
|
|
@tap="applyFilter"
|
|
|
|
/>
|
2021-06-15 11:04:42 +00:00
|
|
|
</RGridLayout>
|
2021-04-01 10:55:35 +00:00
|
|
|
</GridLayout>
|
|
|
|
</Page>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { localize } from "@nativescript/localize";
|
|
|
|
import { mapActions, mapState } from "vuex";
|
|
|
|
let filterTimer;
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
2021-06-18 12:52:03 +00:00
|
|
|
filter: "cuisine",
|
2021-04-01 10:55:35 +00:00
|
|
|
localCuisine: null,
|
|
|
|
localCategory: null,
|
|
|
|
localTag: null,
|
2021-06-15 11:04:42 +00:00
|
|
|
reset: 0,
|
2021-04-01 10:55:35 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapState([
|
|
|
|
"icon",
|
|
|
|
"recipes",
|
|
|
|
"cuisines",
|
|
|
|
"categories",
|
2021-06-15 11:04:42 +00:00
|
|
|
"selCuisine",
|
|
|
|
"selCategory",
|
|
|
|
"selTag",
|
|
|
|
"theme",
|
|
|
|
"RTL",
|
2021-04-01 10:55:35 +00:00
|
|
|
]),
|
|
|
|
pathList() {
|
|
|
|
let arr = [
|
|
|
|
{
|
|
|
|
type: "cuisine",
|
|
|
|
title: localize(this.localCuisine),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: "category",
|
|
|
|
title: localize(this.localCategory),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: "tag",
|
|
|
|
title: localize(this.localTag),
|
|
|
|
},
|
|
|
|
];
|
2021-06-18 12:52:03 +00:00
|
|
|
switch (this.filter) {
|
2021-04-01 10:55:35 +00:00
|
|
|
case "cuisine":
|
|
|
|
return arr.slice(0, -2);
|
|
|
|
case "category":
|
|
|
|
return arr.slice(0, -1);
|
|
|
|
}
|
|
|
|
return arr;
|
|
|
|
},
|
|
|
|
filterList() {
|
2021-06-18 12:52:03 +00:00
|
|
|
switch (this.filter) {
|
2021-04-01 10:55:35 +00:00
|
|
|
case "cuisine":
|
|
|
|
return this.cuisineList;
|
|
|
|
case "category":
|
|
|
|
return this.categoryList;
|
|
|
|
case "tag":
|
|
|
|
return this.tagList;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
cuisineList() {
|
|
|
|
let arr = this.recipes.map((e) => e.cuisine).sort();
|
|
|
|
return arr.length ? ["allCuis", ...new Set(arr)] : [];
|
|
|
|
},
|
|
|
|
categoryList() {
|
|
|
|
let arr = this.recipes
|
|
|
|
.map(
|
|
|
|
(e) =>
|
|
|
|
(this.localCuisine === "allCuis" ||
|
|
|
|
e.cuisine === this.localCuisine) &&
|
|
|
|
e.category
|
|
|
|
)
|
|
|
|
.filter((e) => e)
|
|
|
|
.sort();
|
|
|
|
return arr.length ? ["allCats", ...new Set(arr)] : [];
|
|
|
|
},
|
|
|
|
tagList() {
|
|
|
|
let arr = this.recipes
|
|
|
|
.map((e) => {
|
|
|
|
if (
|
|
|
|
this.localCuisine === "allCuis" &&
|
|
|
|
this.localCategory === "allCats" &&
|
|
|
|
e.tags.length
|
|
|
|
)
|
|
|
|
return e.tags;
|
|
|
|
else if (
|
|
|
|
this.localCuisine === "allCuis" &&
|
|
|
|
e.category === this.localCategory &&
|
|
|
|
e.tags.length
|
|
|
|
)
|
|
|
|
return e.tags;
|
|
|
|
else if (
|
|
|
|
this.localCategory === "allCats" &&
|
|
|
|
e.cuisine === this.localCuisine &&
|
|
|
|
e.tags.length
|
|
|
|
)
|
|
|
|
return e.tags;
|
|
|
|
else if (
|
|
|
|
e.category === this.localCategory &&
|
|
|
|
e.cuisine === this.localCuisine &&
|
|
|
|
e.tags.length
|
|
|
|
)
|
|
|
|
return e.tags;
|
|
|
|
})
|
|
|
|
.flat()
|
|
|
|
.filter((e) => e)
|
|
|
|
.sort();
|
|
|
|
let showAllTags =
|
|
|
|
this.localCuisine === "allCuis" && this.localCategory === "allCats";
|
|
|
|
return arr.length
|
|
|
|
? [!showAllTags && "allTs", ...new Set(arr)].filter((e) => e)
|
|
|
|
: [];
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
2021-06-18 18:37:01 +00:00
|
|
|
...mapActions(["setCuisine", "setCategory", "setTag"]),
|
2021-06-15 11:04:42 +00:00
|
|
|
pgLoad(args) {
|
2021-06-18 12:52:03 +00:00
|
|
|
this.mLoad(args);
|
2021-06-15 11:04:42 +00:00
|
|
|
this.localCuisine = this.selCuisine;
|
|
|
|
this.localCategory = this.selCategory;
|
|
|
|
this.localTag = this.selTag;
|
2021-06-18 12:52:03 +00:00
|
|
|
if (this.localCuisine) this.filter = "category";
|
|
|
|
if (this.localCategory && this.localTag) this.filter = "tag";
|
2021-04-01 10:55:35 +00:00
|
|
|
this.scrollToRight();
|
|
|
|
},
|
|
|
|
onScrollLoad(args) {
|
|
|
|
this.scrollview = args.object;
|
|
|
|
},
|
|
|
|
setFilterType(type) {
|
2021-06-18 12:52:03 +00:00
|
|
|
this.filter = type;
|
2021-04-01 10:55:35 +00:00
|
|
|
switch (type) {
|
|
|
|
case "cuisine":
|
|
|
|
this.localCategory = null;
|
|
|
|
this.localTag = null;
|
|
|
|
break;
|
|
|
|
case "category":
|
|
|
|
this.localTag = null;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
scrollToRight() {
|
|
|
|
setTimeout(
|
|
|
|
() =>
|
|
|
|
this.scrollview.scrollToHorizontalOffset(
|
2021-06-15 11:04:42 +00:00
|
|
|
this.RTL ? 0 : this.scrollview.scrollableWidth,
|
2021-04-01 10:55:35 +00:00
|
|
|
true
|
|
|
|
),
|
|
|
|
10
|
|
|
|
);
|
|
|
|
},
|
|
|
|
setRecipeFilter(item) {
|
2021-06-15 11:04:42 +00:00
|
|
|
this.reset = 0;
|
2021-06-18 12:52:03 +00:00
|
|
|
switch (this.filter) {
|
2021-04-01 10:55:35 +00:00
|
|
|
case "cuisine":
|
|
|
|
this.localCuisine = item;
|
2021-06-18 12:52:03 +00:00
|
|
|
this.filter = "category";
|
2021-04-01 10:55:35 +00:00
|
|
|
break;
|
|
|
|
case "category":
|
|
|
|
this.localCategory = item;
|
2021-06-18 12:52:03 +00:00
|
|
|
if (this.tagList.length) this.filter = "tag";
|
2021-04-01 10:55:35 +00:00
|
|
|
break;
|
|
|
|
default:
|
|
|
|
this.localTag = item;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
this.scrollToRight();
|
|
|
|
},
|
|
|
|
applyFilter() {
|
|
|
|
this.setCuisine(this.localCuisine);
|
|
|
|
this.setCategory(this.localCategory);
|
|
|
|
this.setTag(this.localTag);
|
2021-06-15 11:04:42 +00:00
|
|
|
this.filterFavourites = this.filterTrylater = 0;
|
|
|
|
this.$modal.close(this.reset);
|
2021-04-01 10:55:35 +00:00
|
|
|
},
|
|
|
|
resetFilter() {
|
2021-06-18 12:52:03 +00:00
|
|
|
this.filter = "cuisine";
|
2021-04-01 10:55:35 +00:00
|
|
|
this.localCuisine = this.localCategory = this.localTag = null;
|
2021-06-15 11:04:42 +00:00
|
|
|
this.reset = 1;
|
2021-04-01 10:55:35 +00:00
|
|
|
},
|
|
|
|
touch({ object, action }, item) {
|
2021-06-18 12:52:03 +00:00
|
|
|
this.touchFade(object, action);
|
2021-04-01 10:55:35 +00:00
|
|
|
if (action == "up") this.setRecipeFilter(item);
|
|
|
|
},
|
|
|
|
touchSelector({ object, action }, type) {
|
2021-06-18 12:52:03 +00:00
|
|
|
if (this.filter != type) {
|
|
|
|
this.touchFade(object, action);
|
|
|
|
if (action == "up") this.setFilterType(type);
|
|
|
|
}
|
2021-04-01 10:55:35 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|