chamilo-lms/assets/vue/views/user/courses/List.vue

<template>
  <StickyCourses />

  <hr />

  <div
    v-if="isLoading"
    class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
  >
    <Skeleton height="16rem" />
    <Skeleton
      class="hidden md:block"
      height="16rem"
    />
    <Skeleton
      class="hidden lg:block"
      height="16rem"
    />
    <Skeleton
      class="hidden xl:block"
      height="16rem"
    />
  </div>

  <div
    v-if="!isLoading && courses.length > 0"
    class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
  >
    <CourseCardList :courses="courses" />
  </div>
  <EmptyState
    v-else-if="!isLoading && 0 === courses.length"
    :detail="t('Go to Explore to find a topic of interest, or wait for someone to subscribe you')"
    :summary="t('You don\'t have any course yet')"
    icon="courses"
  />
</template>

<script setup>
import { onMounted, computed } from "vue"
import { useStore } from "vuex"
import { useQuery } from "@vue/apollo-composable"
import { useI18n } from "vue-i18n"
import { GET_COURSE_REL_USER } from "../../../graphql/queries/CourseRelUser.js"
import Skeleton from "primevue/skeleton"
import StickyCourses from "../../../views/user/courses/StickyCourses.vue"
import CourseCardList from "../../../components/course/CourseCardList.vue"
import EmptyState from "../../../components/EmptyState"

const store = useStore()
const { t } = useI18n()

let user = computed(() => store.getters["security/getUser"])

const { result, loading, refetch } = useQuery(GET_COURSE_REL_USER, () => ({
  user: user.value["@id"],
}))

const isLoading = computed(() => loading.value)

const courses = computed(() => result.value?.courseRelUsers.edges.map(({ node }) => node.course) ?? [])

onMounted(() => {
  refetch()
})
</script>