124 lines
3.2 KiB
Vue
124 lines
3.2 KiB
Vue
<template>
|
|
<div class="page-container">
|
|
<list-header :title="listTitle" :info="info" :sticky="true" />
|
|
|
|
<results-list :results="results" v-if="results" />
|
|
|
|
<loader v-if="!results.length" />
|
|
|
|
<div v-if="page < totalPages" class="fullwidth-button">
|
|
<seasoned-button @click="loadMore">load more</seasoned-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ListHeader from "@/components/ListHeader";
|
|
import ResultsList from "@/components/ResultsList";
|
|
import SeasonedButton from "@/components/ui/SeasonedButton";
|
|
import Loader from "@/components/ui/Loader";
|
|
import { getTmdbMovieListByName, getRequests } from "@/api";
|
|
import store from "@/store";
|
|
|
|
export default {
|
|
components: { ListHeader, ResultsList, SeasonedButton, Loader },
|
|
data() {
|
|
return {
|
|
legalTmdbLists: ["now_playing", "upcoming", "popular"],
|
|
results: [],
|
|
page: 1,
|
|
totalPages: 0,
|
|
totalResults: 0,
|
|
loading: true
|
|
};
|
|
},
|
|
computed: {
|
|
listTitle() {
|
|
if (this.results.length === 0) return "";
|
|
|
|
const routeListName = this.$route.params.name;
|
|
console.log("routelistname", routeListName);
|
|
return routeListName.includes("_")
|
|
? routeListName.split("_").join(" ")
|
|
: routeListName;
|
|
},
|
|
info() {
|
|
if (this.results.length === 0) return [null, null];
|
|
return [this.pageCount, this.resultCount];
|
|
},
|
|
resultCount() {
|
|
const loadedResults = this.results.length;
|
|
const totalResults = this.totalResults < 10000 ? this.totalResults : "∞";
|
|
return `${loadedResults} of ${totalResults} results`;
|
|
},
|
|
pageCount() {
|
|
return `Page ${this.page} of ${this.totalPages}`;
|
|
}
|
|
},
|
|
methods: {
|
|
loadMore() {
|
|
console.log(this.$route);
|
|
this.loading = true;
|
|
this.page++;
|
|
|
|
window.history.replaceState(
|
|
{},
|
|
"search",
|
|
`/#/${this.$route.fullPath}?page=${this.page}`
|
|
);
|
|
this.init();
|
|
},
|
|
init() {
|
|
const routeListName = this.$route.params.name;
|
|
|
|
if (routeListName === "request") {
|
|
getRequests(this.page).then(results => {
|
|
this.results = this.results.concat(...results.results);
|
|
this.page = results.page;
|
|
this.totalPages = results.total_pages;
|
|
this.totalResults = results.total_results;
|
|
});
|
|
} else if (this.legalTmdbLists.includes(routeListName)) {
|
|
getTmdbMovieListByName(routeListName, this.page).then(results => {
|
|
this.results = this.results.concat(...results.results);
|
|
this.page = results.page;
|
|
this.totalPages = results.total_pages;
|
|
this.totalResults = results.total_results;
|
|
});
|
|
} else {
|
|
// TODO handle if list is not found
|
|
console.log("404 this is not a tmdb list");
|
|
}
|
|
|
|
this.loading = false;
|
|
}
|
|
},
|
|
created() {
|
|
if (this.results.length === 0) this.init();
|
|
|
|
store.dispatch(
|
|
"documentTitle/updateTitle",
|
|
`${this.$router.history.current.name} ${this.$route.params.name}`
|
|
);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "./src/scss/media-queries";
|
|
|
|
@include mobile-only {
|
|
.page-container {
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
.fullwidth-button {
|
|
width: 100%;
|
|
margin: 1rem 0;
|
|
padding-bottom: 2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
</style>
|