Coach loading state reports

kolibri/plugins/coach/assets/src/app.js

@@ -6,6 +6,7 @@ import router from 'kolibri.coreVue.router';
 import KolibriApp from 'kolibri_app';
 import routes from './routes';
 import pluginModule from './modules/pluginModule';
+import pages from './views/reports/allReportsPages';
 
 class CoachToolsModule extends KolibriApp {
   get stateSetters() {
@@ -24,7 +25,12 @@ class CoachToolsModule extends KolibriApp {
         redirectBrowser();
         return;
       }
-      this.store.dispatch('loading');
+
+      const skipLoading = [pages.ReportsQuizLearnerPage.name];
+
+      if (!skipLoading.includes(to.name)) {
+        this.store.dispatch('loading');
+      }
       const promises = [];
       // Clear the snackbar at every navigation to prevent it from re-appearing
       // when the next page component mounts.

kolibri/plugins/coach/assets/src/modules/questionList/handlers.js

@@ -1,12 +1,17 @@
 import store from 'kolibri.coreVue.vuex.store';
+import { showResourceView } from '../resourceDetail/handlers';
 
 export function generateQuestionListHandler(paramsToCheck) {
   return function questionListHandler(to, from) {
     if (paramsToCheck.some(param => to.params[param] !== from.params[param])) {
       // Only set loading state if we are not switching
       store.dispatch('loading');
     }
-    showQuestionListView(to.params).then(() => {
+    const { exerciseId } = to.params;
+    Promise.all([
+      exerciseId ? showResourceView({ exerciseId }) : Promise.resolve(),
+      showQuestionListView(to.params),
+    ]).then(() => {
       // Set not loading regardless, as we are now
       // ready to render.
       store.dispatch('notLoading');

kolibri/plugins/coach/assets/src/modules/resourceDetail/handlers.js

@@ -19,7 +19,7 @@ export function generateResourceHandler(paramsToCheck) {
   };
 }
 
-function showResourceView({ resourceId, exerciseId } = {}) {
+export function showResourceView({ resourceId, exerciseId } = {}) {
   // Passed in exerciseId is the content_id of the contentNode
   // Map this to the id of the content node to do this fetch
   const nodeId = store.state.classSummary.contentMap[resourceId || exerciseId].node_id;

kolibri/plugins/coach/assets/src/views/common/LessonStatus.vue

@@ -63,9 +63,10 @@
           {{ coachString('sizeLabel') }}
         </KGridItem>
         <KGridItem :layout12="layout12Value">
-          <p>
+          <p v-if="lesson.size">
             {{ bytesForHumans(lesson.size) }}
           </p>
+          <KEmptyPlaceholder v-else />
         </KGridItem>
       </div>
     </KGrid>

kolibri/plugins/coach/assets/src/views/reports/ExerciseQuestionListPageBase.vue

@@ -8,7 +8,7 @@
     <KPageContainer>
 
       <ReportsResourceHeader
-        :resource="exercise"
+        :resource="resource"
         @previewClick="onPreviewClick"
       />
 
@@ -81,11 +81,12 @@
     mixins: [commonCoach],
     computed: {
       ...mapState('questionList', ['exercise']),
+      ...mapState('resourceDetail', ['resource']),
       ...mapGetters('questionList', ['difficultQuestions']),
       lesson() {
         return this.lessonMap[this.$route.params.lessonId];
       },
-      resource() {
+      exercise() {
         return this.contentMap[this.$route.params.exerciseId];
       },
       group() {