load ssr

src/components/Widgets/Other/ClassroomCarousel/ClassroomCarousel.vue

@@ -192,6 +192,7 @@ import { User } from 'src/models/User.js'
 import ShamsiDate from 'src/assets/ShamsiDate.js'
 import { APIGateway } from 'src/api/APIGateway.js'
 import { ClassroomList } from 'src/models/Classroom.js'
+import { mixinPrefetchServerData } from 'src/mixin/Mixins.js'
 import { ClassroomRegistrationList } from 'src/models/ClassroomRegistration.js'
 import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel/dist/carousel'
 
@@ -203,6 +204,7 @@ export default {
     Pagination,
     Navigation
   },
+  mixins: [mixinPrefetchServerData],
   data: () => ({
     loading: false,
     user: new User(),
@@ -235,9 +237,19 @@ export default {
     if (this.user && this.user.id !== null) {
       this.getUserRegistrations()
     }
-    this.getClassrooms()
   },
   methods: {
+    prefetchServerDataPromise () {
+      return this.getClassrooms()
+    },
+    prefetchServerDataPromiseThen (classroomList) {
+      this.classrooms = new ClassroomList(classroomList.list)
+      this.classrooms.loading = false
+    },
+    prefetchServerDataPromiseCatch () {
+      this.classrooms.loading = false
+    },
+
     loadAuthData () {
       this.user = this.$store.getters['Auth/user']
     },
@@ -264,14 +276,7 @@ export default {
     },
     getClassrooms () {
       this.classrooms.loading = true
-      APIGateway.classroom.index()
-        .then(classroomList => {
-          this.classrooms = new ClassroomList(classroomList.list)
-          this.classrooms.loading = false
-        })
-        .catch(() => {
-          this.classrooms.loading = false
-        })
+      return APIGateway.classroom.index()
     }
   }
 }

src/components/Widgets/Other/ShowClassroomInfo/ShowClassroomInfo.vue

@@ -101,7 +101,8 @@
               </svg>
             </div>
             <div class="title">
-              {{ classroom.professor }}
+              {{ classroom.professor_info.firstname }}
+              {{ classroom.professor_info.lastname }}
             </div>
           </div>
           <div class="col-md-4 col-sm-6 col-12 attribute-column">
@@ -325,13 +326,13 @@
 <script>
 import Enums from 'src/assets/Enums/Enums.js'
 import ShamsiDate from 'src/assets/ShamsiDate.js'
-import { mixinWidget } from 'src/mixin/Mixins.js'
 import { APIGateway } from 'src/api/APIGateway.js'
 import { Classroom } from 'src/models/Classroom.js'
+import { mixinPrefetchServerData, mixinWidget } from 'src/mixin/Mixins.js'
 
 export default {
   name: 'ShowClassroomInfo',
-  mixins: [mixinWidget],
+  mixins: [mixinWidget, mixinPrefetchServerData],
   props: {
     options: {
       type: Object,
@@ -352,10 +353,19 @@ export default {
     loading: true,
     classroom: new Classroom()
   }),
-  mounted () {
-    this.getClassroom()
-  },
   methods: {
+    prefetchServerDataPromise () {
+      return this.getClassroom()
+    },
+    prefetchServerDataPromiseThen (classroom) {
+      this.classroom = new Classroom(classroom)
+      this.loading = false
+      this.$emit('onloadn', this.classroom)
+    },
+    prefetchServerDataPromiseCatch () {
+      this.loading = false
+    },
+
     getTitledDateTime (dateTime) {
       return ShamsiDate.getTitledDateTime(dateTime)
     },
@@ -430,15 +440,7 @@ export default {
     },
     getClassroom () {
       this.loading = true
-      APIGateway.classroom.get(this.$route.params.id)
-        .then(classroom => {
-          this.classroom = new Classroom(classroom)
-          this.loading = false
-          this.$emit('onloadn', this.classroom)
-        })
-        .catch(() => {
-          this.loading = false
-        })
+      return APIGateway.classroom.get(this.$route.params.id)
     }
   }
 }