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.
86 lines
2.2 KiB
86 lines
2.2 KiB
<template>
|
|
<!-- {{ loading }}-->
|
|
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-2">
|
|
<CourseCardList
|
|
:courses="courses"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CourseCardList from '../../../components/course/CourseCardList.vue';
|
|
import {ref, computed} from "vue";
|
|
import {useStore} from 'vuex';
|
|
import gql from "graphql-tag";
|
|
import {useQuery, useResult} from '@vue/apollo-composable'
|
|
|
|
export default {
|
|
name: 'CourseList',
|
|
components: {
|
|
CourseCardList,
|
|
},
|
|
setup() {
|
|
const store = useStore();
|
|
let user = computed(() => store.getters['security/getUser']);
|
|
|
|
if (user.value) {
|
|
let userId = user.value.id;
|
|
/*
|
|
axios.get(ENTRYPOINT + 'users/' + userId + '/courses.json').then(response => {
|
|
if (Array.isArray(response.data)) {
|
|
courses.value = response.data;
|
|
}
|
|
}).catch(function (error) {
|
|
console.log(error);
|
|
}).finally(() =>
|
|
status.value = ''
|
|
);*/
|
|
|
|
const GET_COURSE_REL_USER = gql`
|
|
query getCourses($user: String!) {
|
|
courseRelUsers(user: $user) {
|
|
edges {
|
|
node {
|
|
course {
|
|
_id,
|
|
title,
|
|
illustrationUrl
|
|
users(status: 1, first: 4) {
|
|
edges {
|
|
node {
|
|
id
|
|
status
|
|
user {
|
|
illustrationUrl,
|
|
username,
|
|
firstname,
|
|
lastname
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
const {result, loading, error} = useQuery(GET_COURSE_REL_USER, {
|
|
user: "/api/users/" + userId
|
|
}, );
|
|
|
|
const courses = useResult(result, null, (data) => {
|
|
return data.courseRelUsers.edges.map(function(edge) {
|
|
return edge.node.course;
|
|
});
|
|
});
|
|
|
|
return {
|
|
courses,
|
|
loading
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|