Sessions: Add session tab (WIP)

assets/vue/graphql/queries/SessionRelUser.js

@@ -1,11 +1,11 @@
 import gql from 'graphql-tag';
 
 export const GET_SESSION_REL_USER = gql`
-    query getSessions($user: String!, $afterStartDate: String, $beforeEndDate: String) {
+    query getSessions($user: String!, $afterStartDate: String, $afterEndDate: String, $beforeStartDate: String, $beforeEndDate: String) {
         sessionRelUsers(
             user: $user
-            session_displayStartDate: {after: $afterStartDate}
-            session_displayEndDate: {before: $beforeEndDate}
+            session_accessStartDate: {after: $afterStartDate, before: $beforeStartDate}
+            session_accessEndDate: {after: $afterEndDate, before: $beforeEndDate}
         ) {
             edges {
                 node {
@@ -52,8 +52,8 @@ export const GET_SESSION_REL_USER = gql`
         }
         sessionRelCourseRelUsers(
             user: $user
-            session_displayStartDate: {after: $afterStartDate}
-            session_displayEndDate: {before: $beforeEndDate}
+            session_accessStartDate: {after: $afterStartDate, before: $beforeStartDate}
+            session_accessEndDate: {after: $afterEndDate, before: $beforeEndDate}
         ) {
             edges {
                 node {

assets/vue/router/index.js

@@ -14,6 +14,8 @@ import documents from './documents';
 import store from '../store';
 import MyCourseList from '../views/user/courses/List.vue';
 import MySessionList from '../views/user/sessions/List.vue';
+import MySessionListPast from '../views/user/sessions/Past.vue';
+import MySessionListUpcoming from '../views/user/sessions/Upcoming.vue';
 
 import CatalogLayout from '../layouts/Catalog.vue';
 import MyCoursesLayout from '../layouts/MyCourses.vue';
@@ -70,14 +72,27 @@ const router = createRouter({
         },
         {
             path: '/sessions',
+            //redirect: '/sessions/now',
             component: MySessionList,
             children: [
                 {
-                    path: '/sessions', name: 'MySessions', component: MySessionList,
+                    path: '/sessions', name: 'MySessions',
+                    component: MySessionList,
                     meta: {requiresAuth: true},
                 },
             ],
         },
+        {
+            path: '/sessions/past', name: 'MySessionsPast',
+            component: MySessionListPast,
+            meta: {requiresAuth: true},
+        },
+        {
+            path: '/sessions/upcoming', name: 'MySessionsUpcoming',
+            component: MySessionListUpcoming,
+            meta: {requiresAuth: true},
+        },
+
         {
             path: '/catalog',
             redirect: '/catalog/course',

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

@@ -1,8 +1,16 @@
 <template>
+
+  <q-tabs align="left" dense inline-label no-caps>
+    <q-route-tab :to="{name: 'MySessionsPast'}" label="Past" />
+    <q-route-tab  :to="{name: 'MySessions'}" label="Current" />
+    <q-route-tab  :to="{name: 'MySessionsUpcoming'}" label="Upcoming" />
+  </q-tabs>
+
   <div v-if="sessions.length" class="grid">
 <!--    {{ status }}-->
     <SessionCardList :sessions="sessions" />
   </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">
       <div class="p-10 text-center">
@@ -22,8 +30,8 @@
         </div>
       </div>
     </div>
-
   </div>
+
 </template>
 
 <script>
@@ -32,6 +40,7 @@ import {computed, ref} from "vue";
 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";
 
 export default {
   name: 'SessionList',
@@ -45,11 +54,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, {
-        user: "/api/users/" + userId
+        user: "/api/users/" + userId,
+        beforeStartDate: start,
+        afterEndDate: end,
       });
 
-     const sessions = useResult(result, [], ({sessionRelCourseRelUsers, sessionRelUsers})=> {
+      const sessions = useResult(result, [], ({sessionRelCourseRelUsers, sessionRelUsers})=> {
         let sessionList = [];
         sessionRelUsers.edges.map(({node}) => {
           const sessionExists = sessionList.findIndex(suSession => suSession._id === node.session._id) >= 0;

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

@@ -0,0 +1,100 @@
+<template>
+  <!--  todo make a component-->
+  <q-tabs align="left" dense inline-label no-caps>
+    <q-route-tab :to="{name: 'MySessionsPast'}" label="Past" />
+    <q-route-tab  :to="{name: 'MySessions'}" label="Current" />
+    <q-route-tab  :to="{name: 'MySessionsUpcoming'}" label="Upcoming" />
+  </q-tabs>
+  <div v-if="sessions.length" class="grid">
+<!--    {{ status }}-->
+    <SessionCardList :sessions="sessions" />
+  </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">
+      <div class="p-10 text-center">
+        <div>
+          <v-icon
+            icon="mdi-google-classroom"
+            size="72px"
+            class="font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-ch-primary to-ch-primary-light"
+          />
+        </div>
+
+        <div class="mt-2 font-bold">
+          {{ $t("You don't have any session yet.") }}
+        </div>
+        <div>
+          {{ $t('Go to "Explore" to find a topic of interest, or wait for someone to subscribe you.') }}
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import SessionCardList from '../../../components/session/SessionCardList.vue';
+import {computed, ref} from "vue";
+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'
+
+export default {
+  name: 'SessionListPast',
+  components: {
+    SessionCardList,
+  },
+  setup() {
+    console.log('past');
+
+    const store = useStore();
+    let user = computed(() => store.getters['security/getUser']);
+
+    if (user.value) {
+      let userId = user.value.id;
+      let start = DateTime.local().minus({days: 360}).toISO();
+      let end = DateTime.local().toISO();
+
+      const {result, loading} = useQuery(GET_SESSION_REL_USER, {
+        user: "/api/users/" + userId,
+        afterStartDate: start,
+        beforeEndDate: end,
+      });
+
+     const sessions = useResult(result, [], ({sessionRelCourseRelUsers, sessionRelUsers})=> {
+        let sessionList = [];
+        sessionRelUsers.edges.map(({node}) => {
+          const sessionExists = sessionList.findIndex(suSession => suSession._id === node.session._id) >= 0;
+          if (!sessionExists) {
+            sessionList.push(node.session);
+          }
+
+          return sessionExists ? null : node.session;
+        });
+
+       sessionRelCourseRelUsers.edges.map(({node}) => {
+         const sessionExists = sessionList.findIndex(suSession => suSession._id === node.session._id) >= 0;
+
+         if (!sessionExists) {
+           sessionList.push(node.session);
+         }
+
+         return sessionExists ? null : node.session;
+       });
+
+
+        return sessionList;
+      });
+
+      console.log(sessions);
+      return {
+        sessions,
+        loading
+      }
+    }
+  }
+}
+
+</script>

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

@@ -0,0 +1,98 @@
+<template>
+  <!--  todo make a component-->
+  <q-tabs align="left" dense inline-label no-caps>
+    <q-route-tab :to="{name: 'MySessionsPast'}" label="Past" />
+    <q-route-tab  :to="{name: 'MySessions'}" label="Current" />
+    <q-route-tab  :to="{name: 'MySessionsUpcoming'}" label="Upcoming" />
+  </q-tabs>
+
+  <div v-if="sessions.length" class="grid">
+<!--    {{ status }}-->
+    <SessionCardList :sessions="sessions" />
+  </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">
+      <div class="p-10 text-center">
+        <div>
+          <v-icon
+            icon="mdi-google-classroom"
+            size="72px"
+            class="font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-ch-primary to-ch-primary-light"
+          />
+        </div>
+
+        <div class="mt-2 font-bold">
+          {{ $t("You don't have any session yet.") }}
+        </div>
+        <div>
+          {{ $t('Go to "Explore" to find a topic of interest, or wait for someone to subscribe you.') }}
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import SessionCardList from '../../../components/session/SessionCardList.vue';
+import {computed, ref} from "vue";
+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";
+
+export default {
+  name: 'SessionListUpcoming',
+  components: {
+    SessionCardList,
+  },
+  setup() {
+    const store = useStore();
+    let user = computed(() => store.getters['security/getUser']);
+
+    if (user.value) {
+      let userId = user.value.id;
+
+      let start = DateTime.local().toISO();
+
+      const {result, loading} = useQuery(GET_SESSION_REL_USER, {
+        user: "/api/users/" + userId,
+        afterStartDate: start,
+      });
+
+     const sessions = useResult(result, [], ({sessionRelCourseRelUsers, sessionRelUsers})=> {
+        let sessionList = [];
+        sessionRelUsers.edges.map(({node}) => {
+          const sessionExists = sessionList.findIndex(suSession => suSession._id === node.session._id) >= 0;
+          if (!sessionExists) {
+            sessionList.push(node.session);
+          }
+
+          return sessionExists ? null : node.session;
+        });
+
+       sessionRelCourseRelUsers.edges.map(({node}) => {
+         const sessionExists = sessionList.findIndex(suSession => suSession._id === node.session._id) >= 0;
+
+         if (!sessionExists) {
+           sessionList.push(node.session);
+         }
+
+         return sessionExists ? null : node.session;
+       });
+
+
+        return sessionList;
+      });
+
+      console.log(sessions);
+      return {
+        sessions,
+        loading
+      }
+    }
+  }
+}
+
+</script>

src/CoreBundle/Controller/IndexController.php

@@ -21,11 +21,12 @@ class IndexController extends BaseController
      * @Route("/course/{cid}/home", name="chamilo_core_course_home")
      * @Route("/courses", name="courses", methods={"GET", "POST"}, options={"expose"=true})
      *
-     * @Route("/sessions", name="sessions", methods={"GET", "POST"}, options={"expose"=true})
      * @Route("/catalog/{slug}", name="catalog", methods={"GET", "POST"}, options={"expose"=true})
      * @Route("/resources/document/{nodeId}/manager", methods={"GET"}, name="resources_filemanager")
      * @Route("/account/home", name="account", options={"expose"=true}, name="chamilo_core_account_home")
      */
+    #[Route('/sessions', name: 'sessions')]
+    #[Route('/sessions/{extra}', name: 'sessions_options')]
     public function indexAction(): Response
     {
         return $this->render('@ChamiloCore/Index/vue.html.twig');

src/CoreBundle/Entity/Session.php

@@ -206,33 +206,37 @@ class Session implements ResourceWithAccessUrlInterface
     /**
      * @ORM\Column(name="display_start_date", type="datetime", nullable=true, unique=false)
      */
-    #[Groups(['session:read', 'session_rel_user:read'])]
+    #[Groups(['session:read', 'session_rel_user:read', 'session_rel_course_rel_user:read'])]
     protected ?DateTime $displayStartDate;
 
     /**
      * @ORM\Column(name="display_end_date", type="datetime", nullable=true, unique=false)
      */
-    #[Groups(['session:read', 'session_rel_user:read'])]
+    #[Groups(['session:read', 'session_rel_user:read', 'session_rel_course_rel_user:read'])]
     protected ?DateTime $displayEndDate;
 
     /**
      * @ORM\Column(name="access_start_date", type="datetime", nullable=true, unique=false)
      */
+    #[Groups(['session:read', 'session_rel_user:read', 'session_rel_course_rel_user:read'])]
     protected ?DateTime $accessStartDate;
 
     /**
      * @ORM\Column(name="access_end_date", type="datetime", nullable=true, unique=false)
      */
+    #[Groups(['session:read', 'session_rel_user:read', 'session_rel_course_rel_user:read'])]
     protected ?DateTime $accessEndDate;
 
     /**
      * @ORM\Column(name="coach_access_start_date", type="datetime", nullable=true, unique=false)
      */
+    #[Groups(['session:read', 'session_rel_user:read', 'session_rel_course_rel_user:read'])]
     protected ?DateTime $coachAccessStartDate;
 
     /**
      * @ORM\Column(name="coach_access_end_date", type="datetime", nullable=true, unique=false)
      */
+    #[Groups(['session:read', 'session_rel_user:read', 'session_rel_course_rel_user:read'])]
     protected ?DateTime $coachAccessEndDate;
 
     /**

src/CoreBundle/Entity/SessionRelCourseRelUser.php

@@ -46,7 +46,14 @@ use Symfony\Component\Validator\Constraints as Assert;
 ])]
 #[ApiFilter(
     DateFilter::class,
-    properties: ['session.displayStartDate' => null, 'session.displayEndDate' => null]
+    properties: [
+        'session.displayStartDate' => null,
+        'session.displayEndDate' => null,
+        'session.accessStartDate' => null,
+        'session.accessEndDate' => null,
+        'session.coachAccessStartDate' => null,
+        'session.coachAccessEndDate' => null,
+    ]
 )]
 class SessionRelCourseRelUser
 {

src/CoreBundle/Entity/SessionRelUser.php

@@ -61,7 +61,14 @@ use Symfony\Component\Serializer\Annotation\Groups;
 #[ApiFilter(SearchFilter::class, properties: ['session' => 'exact', 'user' => 'exact'])]
 #[ApiFilter(
     DateFilter::class,
-    properties: ['session.displayStartDate' => null, 'session.displayEndDate' => null]
+    properties: [
+        'session.displayStartDate' => null,
+        'session.displayEndDate' => null,
+        'session.accessStartDate' => null,
+        'session.accessEndDate' => null,
+        'session.coachAccessStartDate' => null,
+        'session.coachAccessEndDate' => null,
+    ]
 )]
 class SessionRelUser
 {