Sessions: Fix /sessions url using the sessions_rel_users.json

assets/vue/views/user/courses/CourseCard.vue

@@ -1,13 +1,14 @@
 <template>
   <b-row no-gutters>
-    <b-col md="4">
+    <b-col md="2">
       <b-card-img
         src="/img/icons/64/course.png"
         alt="Image"
+        img-left
         class="rounded-0"
       />
     </b-col>
-    <b-col md="8">
+    <b-col md="10">
       <b-card-body :title="course.title">
         <!--              <b-card-text>-->
         <!--                Course description-->

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

@@ -1,12 +1,12 @@
 <template>
   <div class="course-list">
-      {{ status }}
+    {{ status }}
-      <SessionCard :sessions="sessions"></SessionCard>
+    <SessionCardList :sessions="sessions"></SessionCardList>
   </div>
 </template>
 
 <script>
-import SessionCard from './SessionCard';
+import SessionCardList from './SessionCardList';
 import ListMixin from '../../../mixins/ListMixin';
 import { ENTRYPOINT } from '../../../config/entrypoint';
 import axios from "axios";
@@ -16,7 +16,7 @@ export default {
   servicePrefix: 'Course',
   mixins: [ListMixin],
   components: {
-      SessionCard
+      SessionCardList
   },
   data() {
     return {
@@ -32,7 +32,7 @@ export default {
         this.status = 'Loading';
         let user = this.$store.getters['security/getUser'];
         if (user) {
-          axios.get(ENTRYPOINT + 'users/' + user.id + '/session_course_subscriptions.json').then(response => {
+          axios.get(ENTRYPOINT + 'users/' + user.id + '/sessions_rel_users.json').then(response => {
             this.status = '';
             if (Array.isArray(response.data)) {
               this.sessions = response.data;

assets/vue/views/user/sessions/SessionCard.vue

@@ -1,46 +1,50 @@
 <template>
-  <v-container grid-list-xl fluid>
+  <b-row no-gutters>
-    <v-layout row wrap>
+    <b-col md="2">
-      <v-row dense>
+      <b-card-img
-        <v-col
+          src="/img/icons/64/session.png"
-              v-for="card in sessions"
+          alt="Image"
-              :key="card.course.title"
+          class="mb-3"
-              :cols="12"
+          img-left
+      />
+    </b-col>
+    <b-col md="10">
+      <b-card-body :title="sessionRelUser.session.name">
+        <b-card
+            v-for="course in sessionRelUser.courses"
+            :key="course.id"
+            no-body
+            class="overflow-hidden"
+            style="max-width: 540px;"
         >
-          <v-card>
+          <b-card-body :title="course.course.title">
-            <div class="d-flex flex-no-wrap">
+            <!--              <b-card-text>-->
-              <v-avatar
+            <!--                Course description-->
-                      class="ma-3"
+            <!--              </b-card-text>-->
-                      tile
+            <b-button
-              >
+                :href=" '/course/' + course.course.id + '/home' + '?sid=' + sessionRelUser.session.id"
-                <v-img src="/img/icons/48/blackboard_blue.png"></v-img>
+                variant="primary"
-              </v-avatar>
+            >
-              <div >
+              Go
-                <v-card-title v-text="card.course.title">
+            </b-button>
-                </v-card-title>
+          </b-card-body>
-              </div>
+        </b-card>
-            </div>
+      </b-card-body>
-            <v-card-actions>
+    </b-col>
-              <v-btn
+  </b-row>
-                      :href=" '/course/' + card.course.id + '/home'"
-                      text
-                      color="deep-purple accent-4"
-              >
-                Go
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-layout>
-  </v-container>
 </template>
 
 <script>
 export default {
   name: 'SessionCard',
   props: {
-    sessions: Array
+    sessionRelUser: Object,
   },
+  data() {
+    return {
+    };
+  },
+  methods: {
+  }
 };
 </script>

assets/vue/views/user/sessions/SessionCardList.vue

@@ -0,0 +1,87 @@
+<template>
+  <span>
+    <b-button-group>
+      <b-button
+        rounded
+        :variant="isList()"
+        @click="changeLayout"
+      >
+        <font-awesome-icon icon="bars" />
+      </b-button>
+      <b-button
+        :variant="isDeck()"
+        rounded
+        @click="changeLayout"
+      >
+        <font-awesome-icon icon="th-large" />
+      </b-button>
+    </b-button-group>
+
+    <b-card-group
+      v-if="deck"
+      columns
+    >
+      <b-card
+        v-for="card in sessions"
+        :key="card.session.id"
+        no-body
+        class="overflow-hidden"
+        style="max-width: 540px;"
+      >
+        <SessionCard
+          :session="card"
+        />
+      </b-card>
+    </b-card-group>
+    <span v-else>
+      <b-card
+        v-for="card in sessions"
+        :key="card.session.id"
+        no-body
+        class="overflow-hidden"
+        style="max-width: 540px;"
+      >
+        <SessionCard
+          :sessionRelUser="card"
+        />
+      </b-card>
+      <span />
+    </span>
+  </span>
+</template>
+
+<script>
+
+import SessionCard from './SessionCard';
+export default {
+  name: 'SessionCardList',
+  components: {
+    SessionCard
+  },
+  props: {
+    sessions: Array,
+  },
+  data() {
+    return {
+      deck: false
+    };
+  },
+  methods: {
+    isList: function (){
+      if (!this.deck) {
+        return 'primary';
+      }
+      return 'secondary';
+    },
+    isDeck: function (){
+      if (this.deck) {
+        return 'primary';
+      }
+      return 'secondary';
+    },
+    changeLayout: function () {
+      this.deck = !this.deck;
+    },
+  }
+};
+</script>