mirror of
https://github.com/hay-kot/mealie.git
synced 2025-08-22 22:43:34 -07:00
site loader
This commit is contained in:
parent
5546218851
commit
287faeae27
9 changed files with 78 additions and 45 deletions
|
@ -95,20 +95,14 @@
|
||||||
</div>
|
</div>
|
||||||
<div v-intersect="bumpList" class="d-flex">
|
<div v-intersect="bumpList" class="d-flex">
|
||||||
<v-expand-x-transition>
|
<v-expand-x-transition>
|
||||||
<v-progress-circular
|
<SiteLoader v-if="loading" :loading="loading" :size="150" />
|
||||||
v-if="loading"
|
|
||||||
class="mx-auto mt-1"
|
|
||||||
:size="50"
|
|
||||||
:width="7"
|
|
||||||
color="primary"
|
|
||||||
indeterminate
|
|
||||||
></v-progress-circular>
|
|
||||||
</v-expand-x-transition>
|
</v-expand-x-transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import SiteLoader from "@/components/UI/SiteLoader";
|
||||||
import RecipeCard from "../Recipe/RecipeCard";
|
import RecipeCard from "../Recipe/RecipeCard";
|
||||||
import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
|
import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
|
||||||
import { utils } from "@/utils";
|
import { utils } from "@/utils";
|
||||||
|
@ -118,6 +112,7 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
RecipeCard,
|
RecipeCard,
|
||||||
MobileRecipeCard,
|
MobileRecipeCard,
|
||||||
|
SiteLoader,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
disableToolbar: {
|
disableToolbar: {
|
||||||
|
|
|
@ -43,6 +43,10 @@
|
||||||
</div>
|
</div>
|
||||||
<router-link to="/search"> Advanced Search </router-link>
|
<router-link to="/search"> Advanced Search </router-link>
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
|
<v-card-actions v-if="loading">
|
||||||
|
<SiteLoader :loading="loading" />
|
||||||
|
</v-card-actions>
|
||||||
|
<div v-else>
|
||||||
<MobileRecipeCard
|
<MobileRecipeCard
|
||||||
v-for="(recipe, index) in results.slice(0, 10)"
|
v-for="(recipe, index) in results.slice(0, 10)"
|
||||||
:tabindex="index"
|
:tabindex="index"
|
||||||
|
@ -56,12 +60,14 @@
|
||||||
:route="true"
|
:route="true"
|
||||||
v-on="$listeners.selected ? { selected: () => grabRecipe(recipe) } : {}"
|
v-on="$listeners.selected ? { selected: () => grabRecipe(recipe) } : {}"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-dialog>
|
</v-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import SiteLoader from "@/components/UI/SiteLoader";
|
||||||
const SELECTED_EVENT = "selected";
|
const SELECTED_EVENT = "selected";
|
||||||
import FuseSearchBar from "@/components/UI/Search/FuseSearchBar";
|
import FuseSearchBar from "@/components/UI/Search/FuseSearchBar";
|
||||||
import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
|
import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
|
||||||
|
@ -69,9 +75,11 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
FuseSearchBar,
|
FuseSearchBar,
|
||||||
MobileRecipeCard,
|
MobileRecipeCard,
|
||||||
|
SiteLoader,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
loading: false,
|
||||||
selectedIndex: -1,
|
selectedIndex: -1,
|
||||||
dialog: false,
|
dialog: false,
|
||||||
searchString: "",
|
searchString: "",
|
||||||
|
@ -82,14 +90,17 @@ export default {
|
||||||
$route() {
|
$route() {
|
||||||
this.dialog = false;
|
this.dialog = false;
|
||||||
},
|
},
|
||||||
dialog(val) {
|
async dialog(val) {
|
||||||
if (!val) {
|
if (!val) {
|
||||||
this.resetSelected();
|
this.resetSelected();
|
||||||
|
} else if (this.allItems.length <= 0) {
|
||||||
|
this.loading = true;
|
||||||
|
await this.$store.dispatch("requestAllRecipes");
|
||||||
|
this.loading = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$store.dispatch("requestAllRecipes");
|
|
||||||
document.addEventListener("keydown", this.onUpDown);
|
document.addEventListener("keydown", this.onUpDown);
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
25
frontend/src/components/UI/SiteLoader.vue
Normal file
25
frontend/src/components/UI/SiteLoader.vue
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
<template>
|
||||||
|
<v-progress-circular class="mx-auto" :width="size / 20" :size="size" color="primary lighten-2" indeterminate>
|
||||||
|
<div class="text-center">
|
||||||
|
<v-icon :size="size / 2" color="primary lighten-2">
|
||||||
|
{{ $globals.icons.primary }}
|
||||||
|
</v-icon>
|
||||||
|
<div>
|
||||||
|
Loading Recipes
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</v-progress-circular>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
loading: {
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: 200,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -18,12 +18,9 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
<SearchBar
|
<div v-if="!isMobile" style="width: 350px;">
|
||||||
v-if="!isMobile"
|
<SearchBar :show-results="true" @selected="navigateFromSearch" :max-width="isMobile ? '100%' : '450px'" />
|
||||||
:show-results="true"
|
</div>
|
||||||
@selected="navigateFromSearch"
|
|
||||||
:max-width="isMobile ? '100%' : '450px'"
|
|
||||||
/>
|
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<v-btn icon @click="$refs.recipeSearch.open()">
|
<v-btn icon @click="$refs.recipeSearch.open()">
|
||||||
<v-icon> mdi-magnify </v-icon>
|
<v-icon> mdi-magnify </v-icon>
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="pa-5">
|
<v-container fluid class="pa-5">
|
||||||
<v-slide-x-transition hide-on-leave>
|
<v-slide-x-transition hide-on-leave>
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</v-slide-x-transition>
|
</v-slide-x-transition>
|
||||||
</div>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<v-container>
|
<v-container>
|
||||||
<v-progress-linear v-if="loading" indeterminate color="primary"></v-progress-linear>
|
|
||||||
<CardSection
|
<CardSection
|
||||||
title-icon=""
|
title-icon=""
|
||||||
:sortable="true"
|
:sortable="true"
|
||||||
|
@ -8,14 +7,19 @@
|
||||||
:recipes="shownRecipes"
|
:recipes="shownRecipes"
|
||||||
@sort="assignSorted"
|
@sort="assignSorted"
|
||||||
/>
|
/>
|
||||||
|
<v-row class="d-flex">
|
||||||
|
<SiteLoader class="mx-auto" v-if="loading" :loading="loading" :size="200" />
|
||||||
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import SiteLoader from "@/components/UI/SiteLoader";
|
||||||
import CardSection from "@/components/UI/CardSection";
|
import CardSection from "@/components/UI/CardSection";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
SiteLoader,
|
||||||
CardSection,
|
CardSection,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
const Admin = () => import("@/pages/Admin");
|
const Admin = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin");
|
||||||
const Migration = () => import("@/pages/Admin/Migration");
|
const Migration = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/Migration");
|
||||||
const Profile = () => import("@/pages/Admin/Profile");
|
const Profile = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/Profile");
|
||||||
const ManageUsers = () => import("@/pages/Admin/ManageUsers");
|
const ManageUsers = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/ManageUsers");
|
||||||
const Settings = () => import("@/pages/Admin/Settings");
|
const Settings = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/Settings");
|
||||||
const About = () => import("@/pages/Admin/About");
|
const About = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/About");
|
||||||
const ToolBox = () => import("@/pages/Admin/ToolBox");
|
const ToolBox = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/ToolBox");
|
||||||
const Dashboard = () => import("@/pages/Admin/Dashboard");
|
const Dashboard = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/Dashboard");
|
||||||
import { store } from "../store";
|
import { store } from "../store";
|
||||||
|
|
||||||
export const adminRoutes = {
|
export const adminRoutes = {
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
const ViewRecipe = () => import("@/pages/Recipe/ViewRecipe");
|
const ViewRecipe = () => import(/* webpackChunkName: "recipes" */ "@/pages/Recipe/ViewRecipe");
|
||||||
const NewRecipe = () => import("@/pages/Recipe/NewRecipe");
|
const NewRecipe = () => import(/* webpackChunkName: "recipes" */ "@/pages/Recipe/NewRecipe");
|
||||||
const CustomPage = () => import("@/pages/Recipes/CustomPage");
|
const CustomPage = () => import(/* webpackChunkName: "recipes" */ "@/pages/Recipes/CustomPage");
|
||||||
const AllRecipes = () => import("@/pages/Recipes/AllRecipes");
|
const AllRecipes = () => import(/* webpackChunkName: "recipes" */ "@/pages/Recipes/AllRecipes");
|
||||||
const CategoryTagPage = () => import("@/pages/Recipes/CategoryTagPage");
|
const CategoryTagPage = () => import(/* webpackChunkName: "recipes" */ "@/pages/Recipes/CategoryTagPage");
|
||||||
import { api } from "@/api";
|
import { api } from "@/api";
|
||||||
|
|
||||||
export const recipeRoutes = [
|
export const recipeRoutes = [
|
||||||
|
|
|
@ -41,6 +41,7 @@ const actions = {
|
||||||
this.commit("setRecentRecipes", hash);
|
this.commit("setRecentRecipes", hash);
|
||||||
},
|
},
|
||||||
async requestAllRecipes({ getters }) {
|
async requestAllRecipes({ getters }) {
|
||||||
|
console.log("All Recipes");
|
||||||
const all = getters.getAllRecipes;
|
const all = getters.getAllRecipes;
|
||||||
const payload = await api.recipes.allSummary(all.length, 9999);
|
const payload = await api.recipes.allSummary(all.length, 9999);
|
||||||
const hash = Object.fromEntries([...all, ...payload].map(e => [e.id, e]));
|
const hash = Object.fromEntries([...all, ...payload].map(e => [e.id, e]));
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue