Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <DefaultLayout>
- <AppSection
- :class="{
- '!pb-0': !featured.length
- }"
- >
- <AppSectionHeader
- :title="subject.title"
- :subtitle="subject.description"
- />
- <div
- class="flex flex-wrap -ml-4 -mr-4"
- v-if="featured.length"
- >
- <div
- class="w-full flex md:w-full lg:w-1/3 p-4"
- v-for="course in featured"
- :key="course.id"
- >
- <AppLibraryFeatureCard
- :course="course"
- />
- </div>
- </div>
- </AppSection>
- <AppSection id="list">
- <AppListHeader :title="`All ${subject.title} content`" />
- <AppPaginationMeta :pagination="pagination" />
- <AppCourseList class="mb-6">
- <AppCourseListItem
- v-for="course in courses"
- :key="course.id"
- :course="course"
- />
- </AppCourseList>
- <AppPagination
- :pagination="pagination"
- @change="paginationChanged"
- />
- </AppSection>
- </DefaultLayout>
- </template>
- <script>
- import { mapGetters, mapActions } from 'vuex'
- import pluralize from 'pluralize'
- import VueScrollTo from 'vue-scrollto'
- import DefaultLayout from '@/layouts/DefaultLayout'
- import AppSection from '@/components/elements/sections/AppSection'
- import AppSidebarSection from '@/components/elements/sections/AppSidebarSection'
- import AppSectionHeader from '@/components/elements/headers/AppSectionHeader'
- import AppLibraryFeatureCard from '@/components/elements/library/AppLibraryFeatureCard'
- import AppCourseList from '@/components/collections/courses/AppCourseList'
- import AppCourseListItem from '@/components/collections/courses/AppCourseListItem'
- import AppListHeader from '@/components/elements/headers/AppListHeader'
- import AppPagination from '@/components/elements/pagination/AppPagination'
- import AppPaginationMeta from '@/components/elements/pagination/AppPaginationMeta'
- export default {
- head () {
- return {
- title: `${this.subject.title} - Subjects`
- }
- },
- components: {
- DefaultLayout,
- AppSection,
- AppSectionHeader,
- AppLibraryFeatureCard,
- AppCourseList,
- AppCourseListItem,
- AppSidebarSection,
- AppListHeader,
- AppPagination,
- AppPaginationMeta
- },
- data () {
- return {
- featured: []
- }
- },
- computed: {
- ...mapGetters({
- subject: 'subject/subject',
- courses: 'subject/courses',
- pagination: 'subject/pagination'
- })
- },
- methods: {
- pluralize,
- ...mapActions({
- getCourses: 'subject/getCourses'
- }),
- paginationChanged (page) {
- this.getCourses({
- slug: this.subject.slug,
- page
- })
- VueScrollTo.scrollTo('#list')
- }
- },
- async asyncData ({ app, store, params, error }) {
- try {
- await store.dispatch('subject/getSubject', params.slug)
- await store.dispatch('subject/getCourses', {
- slug: params.slug
- })
- const featured = await app.$axios.$get(`/courses?limit=3&subjects[]=${params.slug}&featured=true&featured_key=subject-index`)
- return {
- featured: featured.data
- }
- } catch (e) {
- if (e.response) {
- error({ statusCode: e.response.status })
- }
- }
- }
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement