Sessions: Add session category

assets/vue/components/session/SessionCardList.vue

@@ -1,23 +1,18 @@
 <template>
-    <div
+  <div
-        v-for="session in sessions"
+      v-for="session in sessions"
-        :key="session.id"
+      :key="session.id"
-    >
+  >
-      <div v-if="session.category"
+    <SessionCard
-           class="text-xl"
+        :session="session"
-      >
+    />
-        <v-icon icon="mdi-folder" /> {{ session.category.name }}
+  </div>
-      </div>
-
-      <SessionCard
-          :session="session"
-      />
-    </div>
 </template>
 
 <script>
 
 import SessionCard from './SessionCard.vue';
+
 export default {
   name: 'SessionCardList',
   components: {
@@ -32,13 +27,13 @@ export default {
     };
   },
   methods: {
-    isList: function (){
+    isList: function () {
       if (!this.deck) {
         return 'primary';
       }
       return 'secondary';
     },
-    isDeck: function (){
+    isDeck: function () {
       if (this.deck) {
         return 'primary';
       }

assets/vue/components/session/Tabs.vue

@@ -1,8 +1,8 @@
 <template>
   <q-tabs align="left" dense inline-label no-caps>
-    <q-route-tab :to="{name: 'MySessionsPast'}" label="Past"/>
+    <q-route-tab :to="{name: 'MySessionsPast'}" :label="$t('Past')"/>
-    <q-route-tab :to="{name: 'MySessions'}" label="Current"/>
+    <q-route-tab :to="{name: 'MySessions'}" :label="$t('Current')"/>
-    <q-route-tab :to="{name: 'MySessionsUpcoming'}" label="Upcoming"/>
+    <q-route-tab :to="{name: 'MySessionsUpcoming'}" :label="$t('Upcoming')"/>
   </q-tabs>
 </template>
 

assets/vue/graphql/queries/SessionRelUser.js

@@ -13,6 +13,7 @@ export const GET_SESSION_REL_USER = gql`
                         _id
                         name
                         category {
+                            _id
                             id
                             name
                         }

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

@@ -1,7 +1,18 @@
 <template>
   <StickyCourses/>
   <SessionTabs/>
-  <SessionListWrapper :sessions="sessions"/>
+  <SessionListWrapper :sessions="sessionList"/>
+
+  <div v-if="categories.length" class="grid">
+    <div v-for="category in categories" >
+      <div class="text-xl">
+        <v-icon icon="mdi-folder" /> {{ category.name }} {{category._id}}
+      </div>
+
+      <SessionListWrapper :sessions="getSessionsFromCategory(category)"/>
+
+    </div>
+  </div>
 </template>
 
 <script>
@@ -13,14 +24,17 @@ import {GET_SESSION_REL_USER} from "../../../graphql/queries/SessionRelUser.js";
 import {DateTime} from "luxon";
 import SessionTabs from '../../../components/session/Tabs';
 import SessionListWrapper from '../../../components/session/SessionListWrapper';
+//import SessionCategoryListWrapper from '../../../components/session/SessionCategoryListWrapper';
 import StickyCourses from '../../../views/user/courses/StickyCourses.vue';
+import isEmpty from "lodash/isEmpty";
 
 export default {
   name: 'SessionList',
   components: {
     StickyCourses,
     SessionTabs,
-    SessionListWrapper
+    SessionListWrapper,
+    SessionCategoryListWrapper
   },
   setup() {
     const store = useStore();
@@ -37,10 +51,11 @@ export default {
         afterEndDate: end,
       });
 
-      const sessions = useResult(resultSessions, [], ({sessionRelUsers}) => {
+      let sessions = useResult(resultSessions, [], ({sessionRelUsers}) => {
         let sessionList = [];
         sessionRelUsers.edges.map(({node}) => {
           const sessionExists = sessionList.findIndex(suSession => suSession._id === node.session._id) >= 0;
+
           if (!sessionExists) {
             sessionList.push(node.session);
           }
@@ -51,8 +66,58 @@ export default {
         return sessionList;
       });
 
+      let categories = useResult(resultSessions, [], ({sessionRelUsers}) => {
+        let categoryList = [];
+        sessionRelUsers.edges.map(({node}) => {
+          if (isEmpty(node.session.category)) {
+            return;
+          }
+          const categoryExists = categoryList.findIndex(cat => cat._id === node.session.category._id) >= 0;
+          if (!categoryExists) {
+            if (!isEmpty(node.session.category)) {
+              categoryList.push(node.session.category);
+            }
+          }
+        });
+
+        return categoryList;
+      });
+
+
+      const sessionsInCategory = ref([]);
+
+      let sessionList = computed(() => sessions.value.filter(function(session) {
+        if (isEmpty(session.category)) {
+          //session.category.sessions.push(session.category);
+          return session;
+        }
+      }));
+
+      let categoryWithSessions = computed(() => {
+        let categoriesIn = [];
+        sessions.value.forEach(function(session) {
+          if (!isEmpty(session.category)) {
+            if (categoriesIn[session.category._id] === undefined) {
+              categoriesIn[session.category._id] = [];
+              categoriesIn[session.category._id]['sessions'] = [];
+            }
+            categoriesIn[session.category._id]['sessions'].push(session);
+          }
+        });
+
+        return categoriesIn;
+      });
+
+      function getSessionsFromCategory(category) {
+          return categoryWithSessions.value[category._id]['sessions'];
+      }
+
       return {
+        getSessionsFromCategory,
+        sessionList,
         sessions,
+        sessionsInCategory,categoryWithSessions,
+        categories,
         loadingSessions
       }
     }

src/CoreBundle/DataProvider/Extension/SessionRelUserExtension.php

@@ -45,7 +45,7 @@ final class SessionRelUserExtension implements QueryCollectionExtensionInterface
         }
 
         if (null === $user = $this->security->getUser()) {
-            throw new AccessDeniedException('Access Denied.');
+            throw new AccessDeniedException('Access Denied SessionRelUser');
         }
 
         $rootAlias = $queryBuilder->getRootAliases()[0];