My Downloads setup and head

learningequality · Feb 23, 2023 · d74ea6c · d74ea6c
1 parent 3861e4e
commit d74ea6c
Show file tree

Hide file tree

Showing 7 changed files with 224 additions and 22 deletions.
diff --git a/kolibri/__init__.py b/kolibri/__init__.py
@@ -35,6 +35,7 @@
     "kolibri.plugins.facility",
     "kolibri.plugins.learn",
     "kolibri.plugins.media_player",
+    "kolibri.plugins.my_downloads",
     "kolibri.plugins.pdf_viewer",
     "kolibri.plugins.setup_wizard",
     "kolibri.plugins.slideshow_viewer",

diff --git a/kolibri/core/assets/src/mixins/commonCoreStrings.js b/kolibri/core/assets/src/mixins/commonCoreStrings.js
@@ -321,6 +321,10 @@ export const coreStrings = createTranslator('CommonCoreStrings', {
     message: 'Loading…',
     context: 'Message displayed when a resource is loading indicating that the user should wait.',
   },
+  myDownloadsLabel: {
+    message: 'My downloads',
+    context: "Users can access and see their content downloads via 'my downloads' option.",
+  },
   nameLabel: {
     message: 'Name',
     context: 'Might indicate the name of a resource in Kolibri.',

diff --git a/kolibri/plugins/my_downloads/assets/src/app.js b/kolibri/plugins/my_downloads/assets/src/app.js
@@ -1,4 +1,4 @@
-import router from 'kolibri.coreVue.router';
+// import router from 'kolibri.coreVue.router';
 import PageRoot from 'kolibri.coreVue.components.PageRoot';
 import routes from './routes';
 import pluginModule from './modules/pluginModule';
@@ -15,9 +15,9 @@ class MyDownloadsModule extends KolibriApp {
     return pluginModule;
   }
   ready() {
-    router.afterEach((toRoute, fromRoute) => {
-      this.store.dispatch('resetModuleState', { toRoute, fromRoute });
-    });
+    // router.afterEach((toRoute, fromRoute) => {
+    // this.store.dispatch('resetModuleState', { toRoute, fromRoute });
+    // });
     super.ready();
   }
 }

diff --git a/kolibri/plugins/my_downloads/assets/src/routes.js b/kolibri/plugins/my_downloads/assets/src/routes.js
@@ -1,16 +1,18 @@
+import store from 'kolibri.coreVue.vuex.store';
+import redirectBrowser from 'kolibri.utils.redirectBrowser';
 import MyDownloadsPage from './views/MyDownloads';
 
 export default [
   {
     path: '/',
     name: 'MY_DOWNLOADS',
     component: MyDownloadsPage,
-    // beforeEnter(to, from, next) {
-    //   if (!store.getters.isUserLoggedIn) {
-    //     redirectBrowser();
-    //   } else {
-    //     preload(next);
-    //   }
-    // },
+    beforeEnter(to, from, next) {
+      if (!store.getters.isUserLoggedIn) {
+        redirectBrowser();
+      } else {
+        next();
+      }
+    },
   },
 ];
diff --git a/kolibri/plugins/my_downloads/assets/src/views/MyDownloads.vue b/kolibri/plugins/my_downloads/assets/src/views/MyDownloads.vue
@@ -1,20 +1,216 @@
 <template>
 
-  <div>
-    <h1>My Downloads</h1>
-    <p>Downloaded files will appear here.</p>
-  </div>
+  <AppBarPage :title="coreString('myDownloadsLabel')">
+    <KPageContainer class="container">
+      <h1> {{ coreString('myDownloadsLabel') }} </h1>
+      <KGrid>
+        <KGridItem
+          :layout8="{ span: 4 }"
+          :layout12="{ span: 6 }"
+        >
+          <table>
+            <tr>
+              <th>Total size of my downloads</th>
+              <td>XX MB</td>
+            </tr>
+            <tr>
+              <th>Total size of my library</th>
+              <td>YY MB</td>
+            </tr>
+            <tr>
+              <th>Free disk space</th>
+              <td>XXX MB</td>
+            </tr>
+          </table>
+        </KGridItem>
+        <KGridItem
+          :layout8="{ span: 4 }"
+          :layout12="{ span: 6 }"
+        >
+          <KSelect
+            class="selector"
+            :style="selectorStyle"
+            :inline="windowIsLarge"
+            label="Activity type"
+            :options="activityTypes"
+            :value="activityTypeSelected"
+            @change="handleActivityTypeChange($event.value)"
+          >
+            <template #display>
+              <KLabeledIcon
+                :label="activityTypeSelected.label"
+                :icon="activityTypeSelected.icon"
+              />
+            </template>
+            <template #option="{ option }">
+              <KLabeledIcon
+                :label="option.label"
+                :icon="option.icon"
+                :style="{ padding: '8px' }"
+              />
+            </template>
+          </KSelect>
+          <KSelect
+            class="selector"
+            :style="selectorStyle"
+            :inline="windowIsLarge"
+            label="Sort by"
+            :options="sortOptions"
+            :value="sortOptionSelected"
+            @change="handleSortChange($event.value)"
+          />
+        </KGridItem>
+      </KGrid>
+    </KPageContainer>
+  </AppBarPage>
 
 </template>
 
 
 <script>
 
+  import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+
   export default {
     name: 'MyDownloads',
+    components: {
+      AppBarPage,
+    },
+    mixins: [commonCoreStrings, responsiveWindowMixin],
+    data() {
+      return {
+        activityTypeSelected: {
+          label: 'All',
+          value: 'all',
+          icon: 'allActivities',
+        },
+        activityTypes: [
+          {
+            label: 'All',
+            value: 'all',
+            icon: 'allActivities',
+          },
+          {
+            label: 'Watch',
+            value: 'watch',
+            icon: 'watchSolid',
+          },
+          {
+            label: 'Read',
+            value: 'read',
+            icon: 'readSolid',
+          },
+          {
+            label: 'Practice',
+            value: 'practice',
+            icon: 'practiceSolid',
+          },
+          {
+            label: 'Reflect',
+            value: 'reflect',
+            icon: 'reflectSolid',
+          },
+          {
+            label: 'Listen',
+            value: 'listen',
+            icon: 'listenSolid',
+          },
+          {
+            label: 'create',
+            value: 'create',
+            icon: 'createSolid',
+          },
+          {
+            label: 'Explore',
+            value: 'explore',
+            icon: 'interactSolid',
+          },
+        ],
+        sortOptionSelected: {
+          label: 'Newest',
+          value: 'newest',
+        },
+        sortOptions: [
+          {
+            label: 'Newest',
+            value: 'newest',
+          },
+          {
+            label: 'Oldest',
+            value: 'oldest',
+          },
+          {
+            label: 'Largest file size',
+            value: 'largest',
+          },
+          {
+            label: 'Smallest file size',
+            value: 'smallest',
+          },
+        ],
+      };
+    },
+    computed: {
+      selectorStyle() {
+        // return styles for child component with class ".selector"
+        return {
+          color: this.$themeTokens.text,
+          backgroundColor: this.$themePalette.grey.v_200,
+          borderRadius: '2px',
+          marginTop: '16px',
+          marginBottom: 0,
+          width: this.windowIsLarge
+            ? 'calc(50% - 16px)' // 16px is the margin of the select
+            : '100%',
+        };
+      },
+    },
+    methods: {
+      handleActivityTypeChange(value) {
+        this.activityTypeSelected = this.activityTypes.find(
+          activityType => activityType.value === value
+        );
+      },
+      handleSortChange(value) {
+        this.sortOptionSelected = this.sortOptions.find(sortOption => sortOption.value === value);
+      },
+    },
   };
 
 </script>
 
 
-<style lang="scss"></style>
+<style lang="scss" scoped>
+
+  .container {
+    min-height: 600px;
+  }
+
+  .selector {
+    /deep/ .ui-select-label-text {
+      padding: 10px 10px 0;
+    }
+
+    /deep/ .ui-select-display {
+      padding: 0 10px;
+    }
+  }
+
+  th {
+    text-align: left;
+  }
+
+  td {
+    text-align: right;
+  }
+
+  th,
+  td {
+    height: 2em;
+    padding-right: 24px;
+    font-size: 14px;
+  }
+
+</style>
diff --git a/kolibri/plugins/my_downloads/assets/src/views/MyDownloadsSideNavEntry.vue b/kolibri/plugins/my_downloads/assets/src/views/MyDownloadsSideNavEntry.vue
@@ -1,9 +1,9 @@
 <template>
 
   <CoreMenuOption
-    :label="$tr('profile')"
+    :label="coreString('myDownloadsLabel')"
     :link="url"
-    icon="profile"
+    icon="download"
   />
 
 </template>
@@ -12,6 +12,7 @@
 <script>
 
   import { UserKinds, NavComponentSections } from 'kolibri.coreVue.vuex.constants';
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import CoreMenuOption from 'kolibri.coreVue.components.CoreMenuOption';
   import navComponents from 'kolibri.utils.navComponents';
   import urls from 'kolibri.urls';
@@ -21,9 +22,7 @@
     components: {
       CoreMenuOption,
     },
-    $trs: {
-      profile: 'Profile',
-    },
+    mixins: [commonCoreStrings],
     computed: {
       url() {
         return urls['kolibri:kolibri.plugins.my_downloads:my_downloads']();

diff --git a/packages/kolibri-tools/lib/webpack.config.plugin.js b/packages/kolibri-tools/lib/webpack.config.plugin.js
@@ -100,7 +100,7 @@ module.exports = (
   } else {
     externals = { kolibri: kolibriName };
   }
-
+  console.log('data.static_dir, data.name', data.static_dir, data.name);
   let bundle = {
     externals,
     name: data.name,