You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.7 KiB
54 lines
1.7 KiB
<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>
|
|
|