Courses: Add sticky courses in UI

assets/vue/components/session/SessionCard.vue

@@ -65,8 +65,6 @@ export default {
       }
     }
 
-    //console.log(courses);
-
     return {
       courses
     }

assets/vue/components/session/SessionListWrapper.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import SessionCardList from '../../../components/session/SessionCardList.vue';
+import SessionCardList from './SessionCardList.vue';
 
 export default {
   name: 'SessionListWrapper',

assets/vue/graphql/queries/Course.js

@@ -0,0 +1,17 @@
+import gql from 'graphql-tag';
+
+export const GET_STICKY_COURSES = gql`
+    query getStickyCourses {
+        courses (sticky: true){
+            edges {
+                node {
+                    _id
+                    title
+                    illustrationUrl
+                    sticky
+                }
+            }
+        }
+    }
+`;
+

assets/vue/views/user/courses/List.vue

@@ -1,9 +1,12 @@
 <template>
-<!--  {{ loading }}-->
-  <div v-if="courses.length" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-2">
-      <CourseCardList
-          :courses="courses"
-      />
+  <StickyCourses/>
+  <!--  {{ loading }}-->
+  <div
+      v-if="courses.length"
+      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>
   <div v-else>
     <div class="bg-gradient-to-r from-gray-100 to-gray-50 flex flex-col rounded-md text-center p-2">
@@ -29,14 +32,16 @@
 
 <script>
 import CourseCardList from '../../../components/course/CourseCardList.vue';
-import {ref, computed} from "vue";
+import {computed} from "vue";
 import {useStore} from 'vuex';
 import {useQuery, useResult} from '@vue/apollo-composable'
 import {GET_COURSE_REL_USER} from "../../../graphql/queries/CourseRelUser.js";
+import StickyCourses from '../../../views/user/courses/StickyCourses.vue';
 
 export default {
   name: 'CourseList',
   components: {
+    StickyCourses,
     CourseCardList,
   },
   setup() {
@@ -48,10 +53,10 @@ export default {
 
       const {result, loading, error} = useQuery(GET_COURSE_REL_USER, {
         user: "/api/users/" + userId
-      }, );
+      });
 
       const courses = useResult(result, [], (data) => {
-        return data.courseRelUsers.edges.map(function(edge) {
+        return data.courseRelUsers.edges.map(function (edge) {
           return edge.node.course;
         });
       });

assets/vue/views/user/sessions/List.vue

@@ -1,4 +1,5 @@
 <template>
+  <StickyCourses/>
   <SessionTabs/>
   <SessionListWrapper :sessions="sessions"/>
 </template>
@@ -10,12 +11,14 @@ import {useStore} from 'vuex';
 import {useQuery, useResult} from '@vue/apollo-composable'
 import {GET_SESSION_REL_USER} from "../../../graphql/queries/SessionRelUser.js";
 import {DateTime} from "luxon";
-import SessionTabs from './Tabs';
-import SessionListWrapper from './SessionListWrapper';
+import SessionTabs from '../../../components/session/Tabs';
+import SessionListWrapper from '../../../components/session/SessionListWrapper';
+import StickyCourses from '../../../views/user/courses/StickyCourses.vue';
 
 export default {
   name: 'SessionList',
   components: {
+    StickyCourses,
     SessionTabs,
     SessionListWrapper
   },
@@ -25,17 +28,16 @@ export default {
 
     if (user.value) {
       let userId = user.value.id;
-
       let start = DateTime.local().toISO();
       let end = DateTime.local().toISO();
 
-      const {result, loading} = useQuery(GET_SESSION_REL_USER, {
+      const {result: resultSessions, loading: loadingSessions} = useQuery(GET_SESSION_REL_USER, {
         user: "/api/users/" + userId,
         beforeStartDate: start,
         afterEndDate: end,
       });
 
-      const sessions = useResult(result, [], ({sessionRelUsers}) => {
+      const sessions = useResult(resultSessions, [], ({sessionRelUsers}) => {
         let sessionList = [];
         sessionRelUsers.edges.map(({node}) => {
           const sessionExists = sessionList.findIndex(suSession => suSession._id === node.session._id) >= 0;
@@ -51,7 +53,7 @@ export default {
 
       return {
         sessions,
-        loading
+        loadingSessions
       }
     }
   }

assets/vue/views/user/sessions/Past.vue

@@ -9,8 +9,8 @@ import {useStore} from 'vuex';
 import {useQuery, useResult} from '@vue/apollo-composable'
 import {GET_SESSION_REL_USER} from "../../../graphql/queries/SessionRelUser.js";
 import {DateTime} from 'luxon'
-import SessionListWrapper from './SessionListWrapper';
-import SessionTabs from './Tabs';
+import SessionListWrapper from '../../../components/session/SessionListWrapper';
+import SessionTabs from '../../../components/session/Tabs';
 
 export default {
   name: 'SessionListPast',
@@ -19,8 +19,6 @@ export default {
     SessionTabs
   },
   setup() {
-    console.log('past');
-
     const store = useStore();
     let user = computed(() => store.getters['security/getUser']);
 

assets/vue/views/user/sessions/Upcoming.vue

@@ -10,8 +10,8 @@ import {useStore} from 'vuex';
 import {useQuery, useResult} from '@vue/apollo-composable'
 import {GET_SESSION_REL_USER} from "../../../graphql/queries/SessionRelUser.js";
 import {DateTime} from "luxon";
-import SessionListWrapper from './SessionListWrapper';
-import SessionTabs from './Tabs';
+import SessionListWrapper from '../../../components/session/SessionListWrapper';
+import SessionTabs from '../../../components/session/Tabs';
 
 export default {
   name: 'SessionListUpcoming',

src/CoreBundle/Entity/Course.php

@@ -10,6 +10,7 @@ use ApiPlatform\Core\Annotation\ApiFilter;
 use ApiPlatform\Core\Annotation\ApiProperty;
 use ApiPlatform\Core\Annotation\ApiResource;
 use ApiPlatform\Core\Annotation\ApiSubresource;
+use ApiPlatform\Core\Bridge\Doctrine\Orm\Filter\BooleanFilter;
 use ApiPlatform\Core\Bridge\Doctrine\Orm\Filter\OrderFilter;
 use ApiPlatform\Core\Bridge\Doctrine\Orm\Filter\SearchFilter;
 use ApiPlatform\Core\Serializer\Filter\PropertyFilter;
@@ -40,6 +41,9 @@ use Symfony\Component\Validator\Constraints as Assert;
     iri: 'https://schema.org/Course',
     attributes: [
         'security' => "is_granted('ROLE_USER')",
+        'filters' => [
+            'course.sticky_boolean_filter',
+        ],
     ],
     itemOperations: [
         'get' => [
@@ -57,7 +61,10 @@ use Symfony\Component\Validator\Constraints as Assert;
 #[ApiFilter(SearchFilter::class, properties: [
     'title' => 'partial',
     'code' => 'partial',
+    //'sticky' => 'partial',
 ])]
+
+//#[ApiFilter(BooleanFilter::class, properties: ['isSticky'])]
 #[ApiFilter(PropertyFilter::class)]
 #[ApiFilter(OrderFilter::class, properties: ['id', 'title'])]