diff options
Diffstat (limited to 'pages')
-rw-r--r-- | pages/index.vue | 16 | ||||
-rw-r--r-- | pages/search.vue | 14 | ||||
-rw-r--r-- | pages/user/_id.vue | 19 |
3 files changed, 42 insertions, 7 deletions
diff --git a/pages/index.vue b/pages/index.vue index 27c157a..5884e7c 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -19,11 +19,13 @@ :key="model.id" :model="model" ) + pagination(:page="page" :pages="pages" v-if="count") </template> <script> import ModelLoading from "@/components/ModelLoading.vue"; import ModelBoxCard from "@/components/ModelBoxCard.vue"; +import Pagination from "@/components/Pagination.vue"; import { mapGetters } from "vuex"; @@ -36,14 +38,24 @@ export default { components: { "model-loading": ModelLoading, "model-box-card": ModelBoxCard, + pagination: Pagination, + }, + data() { + return { + page: 0, + pages: 0, + }; }, computed: { ...mapGetters(["isLoading"]), ...mapGetters("auth", ["isLogged"]), - ...mapGetters("models", ["models"]), + ...mapGetters("models", ["models", "count"]), }, created() { - this.$store.dispatch("models/getModels"); + this.page = this.$route.query.page ?? 0; + this.$store.dispatch("models/getModels", this.page).then(() => { + this.pages = Math.ceil(this.count / 20); + }); }, }; </script> diff --git a/pages/search.vue b/pages/search.vue index 1c09e3b..6f448af 100644 --- a/pages/search.vue +++ b/pages/search.vue @@ -21,11 +21,13 @@ :key="model.id" :model="model" ) + pagination(:page="page" :pages="pages" v-if="count") </template> <script> import ModelLoading from "@/components/ModelLoading.vue"; import ModelBoxCard from "@/components/ModelBoxCard.vue"; +import Pagination from "@/components/Pagination.vue"; import { mapGetters } from "vuex"; @@ -40,20 +42,28 @@ export default { data() { return { q: "", + page: 0, + pages: 0, }; }, components: { "model-loading": ModelLoading, "model-box-card": ModelBoxCard, + pagination: Pagination, }, computed: { ...mapGetters(["isLoading"]), ...mapGetters("auth", ["isLogged"]), - ...mapGetters("models", ["models"]), + ...mapGetters("models", ["models", "count"]), }, created() { this.q = this.$route.query["q"]; - this.$store.dispatch("models/filter", { q: this.q }); + this.page = this.$route.query.page ?? 0; + this.$store + .dispatch("models/filter", { q: this.q, page: this.page }) + .then(() => { + this.pages = Math.ceil(this.count / 20); + }); }, }; </script> diff --git a/pages/user/_id.vue b/pages/user/_id.vue index a43a7c8..797f2c0 100644 --- a/pages/user/_id.vue +++ b/pages/user/_id.vue @@ -19,6 +19,7 @@ :key="model.id" :model="model" ) + pagination(:page="page" :pages="pages" v-if="count") h4.text-lg(v-else class="dark:text-white") No models found </template> @@ -28,6 +29,7 @@ import UserAvatar from "@/components/UserAvatar.vue"; import FilePreview from "@/components/FilePreview.vue"; import ModelLoading from "@/components/ModelLoading.vue"; import ModelBoxCard from "@/components/ModelBoxCard.vue"; +import Pagination from "@/components/Pagination.vue"; import { mapGetters } from "vuex"; @@ -39,6 +41,9 @@ export default { id: 0, user: {}, models: [], + count: 0, + page: 0, + pages: 0, }; }, head() { @@ -51,12 +56,14 @@ export default { "file-preview": FilePreview, "model-loading": ModelLoading, "model-box-card": ModelBoxCard, + pagination: Pagination, }, computed: { ...mapGetters(["isLoading"]), }, created() { this.id = this.$route.params.id; + this.page = this.$route.query.page ?? 0; this.$store.dispatch("users/findById", this.id).then((response) => { if (response.status != 200) { @@ -66,9 +73,15 @@ export default { } }); - this.$store.dispatch("users/findModels", this.id).then((response) => { - if (response.status == 200) this.models = response.data.results; - }); + this.$store + .dispatch("users/findModels", { id: this.id, page: this.page }) + .then((response) => { + if (response.status == 200) { + this.models = response.data.results; + this.count = response.data.count; + this.pages = Math.ceil(this.count / 20); + } + }); }, }; </script> |