Sessions: Add session category list BT#19044

assets/vue/components/session/SessionCategoryListWrapper.vue

@@ -0,0 +1,38 @@
+<template>
+  <div v-if="categories.length" class="grid">
+    <div v-for="category in categories">
+      <div class="text-xl">
+        <v-icon icon="mdi-folder"/>
+        {{ category.name }}
+      </div>
+      <SessionListCategoryWrapper :sessions="getSessionsFromCategory(category)"/>
+    </div>
+  </div>
+</template>
+<script>
+
+import SessionListCategoryWrapper from '../../components/session/SessionListCategoryWrapper';
+import {toRefs} from "vue";
+
+export default {
+  name: 'SessionCategoryListWrapper',
+  components: {
+    SessionListCategoryWrapper
+  },
+  props: {
+    categories: Array,
+    categoryWithSessions: Array
+  },
+  setup(props) {
+    const {categoryWithSessions} = toRefs(props);
+    function getSessionsFromCategory(category) {
+      return categoryWithSessions.value[category._id]['sessions'];
+    }
+
+    return {
+      getSessionsFromCategory
+    }
+  }
+}
+
+</script>

assets/vue/components/session/SessionCategoryView.vue

@@ -0,0 +1,96 @@
+<template>
+  <SessionListNoCategoryWrapper :sessions="sessionList"/>
+  <SessionCategoryListWrapper :categories="categories" :categoryWithSessions="categoryWithSessions"/>
+</template>
+<script>
+
+import SessionCategoryListWrapper from '../../components/session/SessionCategoryListWrapper';
+import SessionListNoCategoryWrapper from "../../components/session/SessionListNoCategoryWrapper";
+
+import isEmpty from "lodash/isEmpty";
+import {computed, ref, toRefs} from "vue";
+import {useResult} from "@vue/apollo-composable";
+
+export default {
+  name: 'SessionCategoryView',
+  components: {
+    SessionCategoryListWrapper,
+    SessionListNoCategoryWrapper
+  },
+  props: {
+    resultSessions: Array,
+  },
+  setup(props) {
+    const {resultSessions} = toRefs(props);
+
+    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);
+        }
+
+        return sessionExists ? null : node.session;
+      });
+      return sessionList;
+    });
+
+    console.log('sessions');
+    console.log(sessions);
+
+    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;
+    });
+
+    console.log(sessionList);
+
+    return {
+      sessionList,
+      sessions,
+      sessionsInCategory,
+      categoryWithSessions,
+      categories
+    }
+  }
+}
+
+</script>

assets/vue/components/session/SessionListNoCategoryWrapper.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="text-xl">
+      <v-icon icon="mdi-folder"/>
+      {{ $t('No category') }}
+    </div>
+    <SessionListCategoryWrapper :sessions="sessions"/>
+</template>
+<script>
+
+import SessionListCategoryWrapper from '../../components/session/SessionListCategoryWrapper';
+
+export default {
+  name: 'SessionListNoCategoryWrapper',
+  components: {
+    SessionListCategoryWrapper
+  },
+  props: {
+    sessions: Array,
+  },
+  setup() {
+  }
+}
+
+</script>

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

@@ -1,23 +1,11 @@
 <template>
   <StickyCourses/>
   <SessionTabs/>
-<!--  Default-->
-<!--  <SessionListWrapper :sessions="sessionList"/>-->
-<!--  Sessions in No category -->
-  <div class="text-xl">
-    <v-icon icon="mdi-folder" /> {{ $t('No category') }}
-  </div>
-  <SessionListCategoryWrapper :sessions="sessionList" />
 
-  <div v-if="categories.length" class="grid">
+  <!-- All sessions -->
-    <div v-for="category in categories" >
+  <!--  <SessionListWrapper :sessions="sessionList"/>-->
-      <div class="text-xl">
-        <v-icon icon="mdi-folder" /> {{ category.name }}
-      </div>
-      <SessionListCategoryWrapper :sessions="getSessionsFromCategory(category)" />
-    </div>
-  </div>
 
+  <SessionCategoryView :result-sessions="resultSessions"/>
 </template>
 
 <script>
@@ -27,19 +15,15 @@ import {useStore} from 'vuex';
 import {useQuery, useResult} from '@vue/apollo-composable'
 import {GET_SESSION_REL_USER_CURRENT} from "../../../graphql/queries/SessionRelUser.js";
 import SessionTabs from '../../../components/session/Tabs';
-import SessionListWrapper from '../../../components/session/SessionListWrapper';
-import SessionListCategoryWrapper from '../../../components/session/SessionListCategoryWrapper';
 import StickyCourses from '../../../views/user/courses/StickyCourses.vue';
-
+import SessionCategoryView from "../../../components/session/SessionCategoryView";
-import isEmpty from "lodash/isEmpty";
 
 export default {
   name: 'SessionList',
   components: {
+    SessionCategoryView,
     StickyCourses,
     SessionTabs,
-    SessionListWrapper,
-    SessionListCategoryWrapper,
   },
   setup() {
     const store = useStore();
@@ -48,78 +32,13 @@ export default {
     if (user.value) {
       let userId = user.value.id;
 
-      const {result: resultSessions, loading: loadingSessions} = useQuery(GET_SESSION_REL_USER_CURRENT, {
+      const {result: resultSessions, loading} = useQuery(GET_SESSION_REL_USER_CURRENT, {
         user: "/api/users/" + userId,
       });
 
-      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);
-          }
-
-          return sessionExists ? null : node.session;
-        });
-
-        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,
+        resultSessions,
-        sessionList,
+        loading
-        sessions,
-        sessionsInCategory,categoryWithSessions,
-        categories,
-        loadingSessions
       }
     }
   }

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

@@ -1,6 +1,9 @@
 <template>
   <SessionTabs/>
-  <SessionListWrapper :sessions="sessions"/>
+
+<!--  <SessionListWrapper :sessions="sessions"/>-->
+
+  <SessionCategoryView :result-sessions="resultSessions"/>
 </template>
 
 <script>
@@ -9,13 +12,13 @@ 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 '../../../components/session/SessionListWrapper';
+import SessionCategoryView from '../../../components/session/SessionCategoryView';
 import SessionTabs from '../../../components/session/Tabs';
 
 export default {
   name: 'SessionListPast',
   components: {
-    SessionListWrapper,
+    SessionCategoryView,
     SessionTabs
   },
   setup() {
@@ -27,29 +30,14 @@ export default {
       let start = DateTime.local().minus({days: 360}).toISO();
       let end = DateTime.local().toISO();
 
-      const {result, loading} = useQuery(GET_SESSION_REL_USER, {
+      const {result: resultSessions, loading} = useQuery(GET_SESSION_REL_USER, {
         user: "/api/users/" + userId,
         afterStartDate: start,
         beforeEndDate: end,
       });
 
-      const sessions = useResult(result, [], ({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;
-        });
-
-        return sessionList;
-      });
-
-      console.log(sessions);
       return {
-        sessions,
+        resultSessions,
         loading
       }
     }

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

@@ -1,6 +1,7 @@
 <template>
   <SessionTabs/>
-  <SessionListWrapper :sessions="sessions"/>
+<!--  <SessionListWrapper :sessions="sessions"/>-->
+  <SessionCategoryView :result-sessions="resultSessions"/>
 </template>
 
 <script>
@@ -10,13 +11,13 @@ 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 '../../../components/session/SessionListWrapper';
+import SessionCategoryView from '../../../components/session/SessionCategoryView';
 import SessionTabs from '../../../components/session/Tabs';
 
 export default {
   name: 'SessionListUpcoming',
   components: {
-    SessionListWrapper,
+    SessionCategoryView,
     SessionTabs
   },
   setup() {
@@ -25,31 +26,15 @@ export default {
 
     if (user.value) {
       let userId = user.value.id;
-
       let start = DateTime.local().toISO();
 
-      const {result, loading} = useQuery(GET_SESSION_REL_USER, {
+      const {result: resultSessions, loading} = useQuery(GET_SESSION_REL_USER, {
         user: "/api/users/" + userId,
         afterStartDate: start,
       });
 
-      const sessions = useResult(result, [], ({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;
-        });
-
-        return sessionList;
-      });
-
-      console.log(sessions);
       return {
-        sessions,
+        resultSessions,
         loading
       }
     }