mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-08 07:38:26 -05:00
Code Issues Packages Projects Releases Wiki Activity

improved code quality of start page scrollers

Browse Source
This commit is contained in:
vabene1111
2024-12-19 21:16:15 +01:00
parent 1c9d19fc76
commit 3e3780028b
37 changed files with 200 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
vue3/src/pages/StartPage.vue
View File

@@ -2,74 +2,38 @@
<v-container>
<horizontal-meal-plan-window></horizontal-meal-plan-window>
<!--TODO ideas for "start page": new recipes, meal plan, "last year/month/cooked long ago", high rated, random keyword -->
<!--TODO if nothing comes up for a category, hide the element, probably move fetch logic into component -->
<horizontal-recipe-scroller title="New Recipes" :skeletons="4" :recipes="new_recipes" icon="fas fa-calendar-alt"></horizontal-recipe-scroller>
<horizontal-recipe-scroller title="Top Rated" :skeletons="2" :recipes="high_rated_recipes" icon="fas fa-star"></horizontal-recipe-scroller>
<horizontal-recipe-scroller
:title="random_keyword.label"
:skeletons="4"
:recipes="random_keyword_recipes"
icon="fas fa-tags"
v-if="random_keyword.label"
></horizontal-recipe-scroller>
<v-card v-if="totalRecipes == 0" class="mt-5 mb-5">
<v-card-title><i class="fa-solid fa-eye-slash"></i> {{ $t('search_no_recipes') }}</v-card-title>
<v-card-text>
<v-btn-group divided>
<v-btn size="large" color="success" prepend-icon="$create" :to="{ name: 'ModelEditPage', params: {model: 'Recipe'} }">{{ $t('Create Recipe') }}</v-btn>
<v-btn size="large" color="primary" prepend-icon="fa-solid fa-globe" :to="{ name: 'RecipeImportPage', params: {} }">{{ $t('Import Recipe') }}</v-btn>
</v-btn-group>
</v-card-text>
</v-card>
<horizontal-recipe-scroller :skeletons="4" mode="recent"></horizontal-recipe-scroller>
<horizontal-recipe-scroller :skeletons="4" mode="new"></horizontal-recipe-scroller>
<horizontal-recipe-scroller :skeletons="2" mode="rating"></horizontal-recipe-scroller>
<horizontal-recipe-scroller :skeletons="4" mode="keyword"></horizontal-recipe-scroller>
</v-container>
</template>
<script lang="ts">
import {defineComponent, ref} from "vue"
import {ApiApi, Keyword, Recipe, RecipeOverview} from "@/openapi"
import KeywordsComponent from "@/components/display/KeywordsBar.vue"
import RecipeCardComponent from "@/components/display/RecipeCard.vue"
import GlobalSearchDialog from "@/components/inputs/GlobalSearchDialog.vue"
import RecipeCard from "@/components/display/RecipeCard.vue"
<script setup lang="ts">
import {onMounted, ref} from "vue"
import {ApiApi} from "@/openapi"
import HorizontalRecipeScroller from "@/components/display/HorizontalRecipeWindow.vue"
import HorizontalMealPlanWindow from "@/components/display/HorizontalMealPlanWindow.vue"
import ModelSelect from "@/components/inputs/ModelSelect.vue"
export default defineComponent({
name: "StartPage",
components: {ModelSelect, HorizontalMealPlanWindow, HorizontalRecipeScroller, RecipeCard, GlobalSearchDialog, RecipeCardComponent, KeywordsComponent},
computed: {},
data() {
return {
recipes: [] as Recipe[],
items: Array.from({length: 50}, (k, v) => v + 1),
const totalRecipes = ref(-1)
new_recipes: [] as RecipeOverview[],
high_rated_recipes: [] as RecipeOverview[],
random_keyword: {} as Keyword,
random_keyword_recipes: [] as RecipeOverview[],
}
},
mounted() {
const api = new ApiApi()
onMounted(() => {
const api = new ApiApi()
api.apiRecipeList({_new: "true", pageSize: 16}).then((r) => {
if (r.results != undefined) {
// TODO openapi generator makes arrays nullable for some reason
this.new_recipes = r.results
}
})
api.apiRecipeList({rating: 4, pageSize: 16}).then((r) => {
if (r.results != undefined) {
this.high_rated_recipes = r.results
}
})
api.apiKeywordList({random: "true", limit: "1"}).then((r) => {
if (r.results != undefined && r.results.length > 0) {
this.random_keyword = r.results[0]
api.apiRecipeList({keywords: r.results[0].id}).then((r) => {
if (r.results != undefined) {
this.random_keyword_recipes = r.results
}
})
}
})
},
methods: {},
api.apiRecipeList({pageSize: 1}).then((r) => {
totalRecipes.value = r.count
})
})
</script>