mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-01-21 08:21:21 -05:00
nuxt init
This commit is contained in:
hay-kot
58
frontend.old/src/pages/Recipes/AllRecipes.vue
Normal file
58
frontend.old/src/pages/Recipes/AllRecipes.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<CardSection
|
||||
title-icon=""
|
||||
:sortable="true"
|
||||
:title="$t('page.all-recipes')"
|
||||
:recipes="shownRecipes"
|
||||
@sort="assignSorted"
|
||||
/>
|
||||
<v-row class="d-flex">
|
||||
<SiteLoader class="mx-auto" v-if="loading" :loading="loading" />
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SiteLoader from "@/components/UI/SiteLoader";
|
||||
import CardSection from "@/components/UI/CardSection";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SiteLoader,
|
||||
CardSection,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
sortedResults: [],
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
if (this.allRecipes.length < 1) {
|
||||
this.loading = true;
|
||||
}
|
||||
await this.$store.dispatch("requestAllRecipes");
|
||||
this.loading = false;
|
||||
},
|
||||
computed: {
|
||||
allRecipes() {
|
||||
return this.$store.getters.getAllRecipes;
|
||||
},
|
||||
shownRecipes() {
|
||||
if (this.sortedResults.length > 0) {
|
||||
return this.sortedResults;
|
||||
} else {
|
||||
return this.allRecipes;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
assignSorted(val) {
|
||||
this.sortedResults = val;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
108
frontend.old/src/pages/Recipes/CategoryTagPage.vue
Normal file
108
frontend.old/src/pages/Recipes/CategoryTagPage.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<div v-if="selectItems">
|
||||
<v-app-bar color="transparent" flat class="mt-n1 rounded">
|
||||
<v-icon large left>
|
||||
{{ $globals.icons.tags }}
|
||||
</v-icon>
|
||||
<v-toolbar-title class="headline"> {{ altTitle }} </v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
</v-app-bar>
|
||||
<v-slide-x-transition hide-on-leave>
|
||||
<v-row>
|
||||
<v-col cols="12" :sm="12" :md="6" :lg="4" :xl="3" v-for="item in selectItems" :key="item.id">
|
||||
<v-card hover :to="`/recipes/${routerTagCat}/${item.slug}`">
|
||||
<v-card-actions>
|
||||
<v-icon>
|
||||
{{ $globals.icons.tags }}
|
||||
</v-icon>
|
||||
<v-card-title class="py-1">{{ item.name }}</v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-slide-x-transition>
|
||||
</div>
|
||||
<CardSection v-else :sortable="true" :title="title" :recipes="shownRecipes" @sort="assignSorted" />
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
import CardSection from "@/components/UI/CardSection";
|
||||
export default {
|
||||
components: {
|
||||
CardSection,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "",
|
||||
recipes: [],
|
||||
sortedResults: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentCategory() {
|
||||
return this.$route.params.category || false;
|
||||
},
|
||||
currentTag() {
|
||||
return this.$route.params.tag || false;
|
||||
},
|
||||
TagOrCategory() {
|
||||
return this.currentCategory || this.currentTag;
|
||||
},
|
||||
routerTagCat() {
|
||||
return this.$route.path.split("/")[2];
|
||||
},
|
||||
altTitle() {
|
||||
return this.routerTagCat === "category" ? this.$t("recipe.categories") : this.$t("tag.tags");
|
||||
},
|
||||
|
||||
selectItems() {
|
||||
if (this.TagOrCategory) return false;
|
||||
if (this.routerTagCat === "category") {
|
||||
return this.$store.getters.getAllCategories;
|
||||
}
|
||||
return this.$store.getters.getAllTags;
|
||||
},
|
||||
|
||||
shownRecipes() {
|
||||
if (this.sortedResults.length > 0) {
|
||||
return this.sortedResults;
|
||||
} else {
|
||||
return this.recipes;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
async TagOrCategory() {
|
||||
this.sortedResults = [];
|
||||
this.getRecipes();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getRecipes();
|
||||
this.sortedResults = [];
|
||||
},
|
||||
methods: {
|
||||
async getRecipes() {
|
||||
if (!this.TagOrCategory === null || this.selectItems) return;
|
||||
|
||||
let data = {};
|
||||
if (this.currentCategory) {
|
||||
data = await api.categories.getRecipesInCategory(this.TagOrCategory);
|
||||
} else {
|
||||
data = await api.tags.getRecipesInTag(this.TagOrCategory);
|
||||
}
|
||||
this.title = data.name;
|
||||
this.recipes = data.recipes;
|
||||
},
|
||||
assignSorted(val) {
|
||||
this.sortedResults = val.slice();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
75
frontend.old/src/pages/Recipes/CustomPage.vue
Normal file
75
frontend.old/src/pages/Recipes/CustomPage.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-app-bar color="transparent" flat class="mt-n1 rounded">
|
||||
<v-icon large left> {{ $globals.icons.pages }} </v-icon>
|
||||
<v-toolbar-title class="headline"> {{ page.name }} </v-toolbar-title>
|
||||
</v-app-bar>
|
||||
|
||||
<div v-if="render">
|
||||
<v-tabs v-model="tab" background-color="transparent" grow show-arrows="">
|
||||
<v-tab v-for="item in page.categories" :key="item.slug" :href="`#${item.slug}`">
|
||||
{{ item.name }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-items class="transparent" v-model="tab">
|
||||
<v-tab-item v-for="(item, index) in page.categories" :key="item.slug + index" :value="item.slug">
|
||||
<CardSection class="mb-5 mx-1" :recipes="item.recipes" @sort="sortRecipes($event, index)" />
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CardSection from "@/components/UI/CardSection";
|
||||
import { api } from "@/api";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CardSection,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: "",
|
||||
title: "",
|
||||
render: false,
|
||||
recipeStore: [],
|
||||
categories: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
pageSlug() {
|
||||
return this.$route.params.customPage;
|
||||
},
|
||||
tab: {
|
||||
set(tab) {
|
||||
this.$router.replace({ query: { ...this.$route.query, tab } });
|
||||
},
|
||||
get() {
|
||||
return this.$route.query.tab;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
pageSlug() {
|
||||
this.buildPage();
|
||||
},
|
||||
},
|
||||
|
||||
async created() {
|
||||
await this.buildPage();
|
||||
this.render = true;
|
||||
},
|
||||
methods: {
|
||||
async buildPage() {
|
||||
this.page = await api.siteSettings.getPage(this.pageSlug);
|
||||
this.tab = this.page.categories[0];
|
||||
},
|
||||
sortRecipes(sortedRecipes, destKey) {
|
||||
this.page.categories[destKey].recipes = sortedRecipes;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
49
frontend.old/src/pages/Recipes/Favorites.vue
Normal file
49
frontend.old/src/pages/Recipes/Favorites.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<CardSection
|
||||
:sortable="true"
|
||||
:title-icon="$globals.icons.user"
|
||||
:title="userData.username"
|
||||
:recipes="shownRecipes"
|
||||
@sort="assignSorted"
|
||||
/>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
import CardSection from "@/components/UI/CardSection";
|
||||
export default {
|
||||
components: {
|
||||
CardSection,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "",
|
||||
userData: {},
|
||||
sortedResults: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
shownRecipes() {
|
||||
if (this.sortedResults.length > 0) {
|
||||
return this.sortedResults;
|
||||
} else {
|
||||
return this.userData.favoriteRecipes;
|
||||
}
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
this.userData = await api.users.getFavorites(this.$route.params.id);
|
||||
this.sortedResults = [];
|
||||
},
|
||||
methods: {
|
||||
assignSorted(val) {
|
||||
this.sortedResults = val.slice();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user