Create ResourceSyncingUiAlert around MissingResourceAlert to use in L…

…earn Plugin
learningequality · Oct 19, 2023 · a6d9925 · a6d9925
1 parent 3c012b2
commit a6d9925
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 10 deletions.
diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
@@ -64,7 +64,7 @@
               :answerState="currentAttempt.answer"
               @interaction="saveAnswer"
             />
-            <MissingResourceAlert v-else :multiple="false" />
+            <ResourceSyncingUiAlert v-else :multiple="false" />
           </KPageContainer>
 
           <BottomAppBar :dir="bottomBarLayoutDirection" :maxWidth="null">
@@ -186,7 +186,7 @@
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
-  import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert';
+  import ResourceSyncingUiAlert from '../ResourceSyncingUiAlert';
   import useProgressTracking from '../../composables/useProgressTracking';
   import { PageNames, ClassesPageNames } from '../../constants';
   import { LearnerClassroomResource } from '../../apiResources';
@@ -208,7 +208,7 @@
       TimeDuration,
       SuggestedTime,
       ImmersivePage,
-      MissingResourceAlert,
+      ResourceSyncingUiAlert,
     },
     mixins: [responsiveWindowMixin, commonCoreStrings],
     setup() {

diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
@@ -2,7 +2,7 @@
 
   <LearnAppBarPage :appBarTitle="learnString('learnLabel')">
     <div v-if="!loading" id="main" role="main">
-      <MissingResourceAlert v-if="missingResources" />
+      <ResourceSyncingUiAlert v-if="missingResources" />
       <YourClasses
         v-if="displayClasses"
         class="section"
@@ -58,8 +58,8 @@
   import { get } from '@vueuse/core';
   import client from 'kolibri.client';
   import urls from 'kolibri.urls';
-  import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert';
   import useUser from 'kolibri.coreVue.composables.useUser';
+  import ResourceSyncingUiAlert from '../ResourceSyncingUiAlert';
   import useChannels from '../../composables/useChannels';
   import useDeviceSettings from '../../composables/useDeviceSettings';
   import useLearnerResources, {
@@ -91,7 +91,7 @@
       ContinueLearning,
       ExploreChannels,
       LearnAppBarPage,
-      MissingResourceAlert,
+      ResourceSyncingUiAlert,
     },
     mixins: [commonLearnStrings],
     setup() {

diff --git a/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
@@ -0,0 +1,55 @@
+<template>
+
+  <MissingResourceAlert>
+    <template v-if="isSyncing" #syncAlert>
+      {{ syncMessage }}
+    </template>
+  </MissingResourceAlert>
+
+</template>
+
+
+<script>
+
+  import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert.vue';
+  import useUserSyncStatus from 'kolibri.coreVue.composables.useUserSyncStatus';
+  import { SyncStatus } from 'kolibri.coreVue.vuex.constants';
+  import { createTranslator } from 'kolibri.utils.i18n';
+
+  const syncStatusDescriptionStrings = createTranslator('SyncStatusDescription', {
+    syncingDescription: {
+      message: 'The device is currently syncing.',
+      context: 'Description of the device syncing status.',
+    },
+    queuedDescription: {
+      message: 'The device is waiting to sync.',
+      context: 'Description of the device syncing status',
+    },
+  });
+
+  export default {
+    name: 'ResourceSyncingUiAlert',
+    components: {
+      MissingResourceAlert,
+    },
+    setup() {
+      const { status } = useUserSyncStatus();
+      return {
+        status,
+      };
+    },
+    computed: {
+      isSyncing() {
+        return this.status == SyncStatus.QUEUED || this.status == SyncStatus.SYNCING;
+      },
+      syncMessage() {
+        /* eslint-disable kolibri/vue-no-undefined-string-uses */
+        return this.status == SyncStatus.QUEUED
+          ? syncStatusDescriptionStrings.$tr('queuedDescription')
+          : syncStatusDescriptionStrings.$tr('syncingDescription');
+        /* eslint-enable */
+      },
+    },
+  };
+
+</script>
diff --git a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
@@ -26,7 +26,7 @@
             {{ currentLesson.description }}
           </p>
         </div>
-        <MissingResourceAlert v-if="lessonResources.length > contentNodes.length" />
+        <ResourceSyncingUiAlert v-if="lessonResources.length > contentNodes.length" />
       </section>
 
       <section v-if="lessonHasResources" class="content-cards">
@@ -57,7 +57,7 @@
   import ProgressIcon from 'kolibri.coreVue.components.ProgressIcon';
   import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert';
+  import ResourceSyncingUiAlert from '../ResourceSyncingUiAlert';
   import useContentLink from '../../composables/useContentLink';
   import useContentNodeProgress from '../../composables/useContentNodeProgress';
   import { PageNames, ClassesPageNames } from '../../constants';
@@ -78,7 +78,7 @@
       ContentIcon,
       ProgressIcon,
       LearnAppBarPage,
-      MissingResourceAlert,
+      ResourceSyncingUiAlert,
     },
     mixins: [commonCoreStrings, commonLearnStrings, responsiveWindowMixin],
     setup() {

diff --git a/packages/kolibri-common/components/MissingResourceAlert.vue b/packages/kolibri-common/components/MissingResourceAlert.vue
@@ -7,7 +7,10 @@
       type="warning"
       :style="{ marginBottom: 0, marginTop: '8px' }"
     >
-      <span>
+      <span v-if="$slots.syncAlert">
+        <slot name="syncAlert"></slot>
+      </span>
+      <span v-else>
         {{ coreString(
           multiple ? 'someResourcesMissingOrNotSupported' :
           'resourceNotFoundOnDevice'