From f400dabc2777aa6795ce8423141ac44f689f68b7 Mon Sep 17 00:00:00 2001
From: Georges Basile Stavracas Neto <georges.stavracas@gmail.com>
Date: Thu, 15 Jun 2023 11:22:39 -0300
Subject: [PATCH 1/4] kolibriApi: Parameterize getContentByFilter()

Instead of using the global value for unavailable
content unconditionally, receive that as an option,
and use the global value as fallback.
---
 kolibri_explore_plugin/assets/src/kolibriApi.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/kolibri_explore_plugin/assets/src/kolibriApi.js b/kolibri_explore_plugin/assets/src/kolibriApi.js
index 784bd1fdf..99b5005f4 100644
--- a/kolibri_explore_plugin/assets/src/kolibriApi.js
+++ b/kolibri_explore_plugin/assets/src/kolibriApi.js
@@ -65,6 +65,9 @@ class KolibriApi {
     }
     const kind = onlyContent ? 'content' : onlyTopics ? ContentNodeKinds.TOPIC : undefined;
 
+    const includeUnavailable =
+      'includeUnavailable' in options ? options.includeUnavailable : !DEFAULT_HIDE_UNAVAILABLE;
+
     return ContentNodeResource.fetchCollection({
       getParams: {
         ids: options.ids,
@@ -76,7 +79,7 @@ class KolibriApi {
         kind: kind,
         kind_in: kinds,
         descendant_of: options.descendantOf,
-        no_available_filtering: true,
+        ...(includeUnavailable && { no_available_filtering: true }),
       },
     }).then(contentNodes => {
       const { more, results } = contentNodes;

From 74efecc5a7a95926b2012d51993cde6542981c54 Mon Sep 17 00:00:00 2001
From: Georges Basile Stavracas Neto <georges.stavracas@gmail.com>
Date: Thu, 15 Jun 2023 11:30:42 -0300
Subject: [PATCH 2/4] Home: Add check to hide unavailable content

Add a checkbox that is effectively equal to the
one added to the Channel's search view.

Changing the switch fetches the list of nodes again,
passing the appropriate flag to KolibriApi. This is
not optimal. One potential improvement is to always
fetch unavailable content, and filter it within the
view, but I've gone with this simpler approach given
the time constraints.
---
 packages/template-ui/src/views/Home.vue | 41 ++++++++++++++++++++++---
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/packages/template-ui/src/views/Home.vue b/packages/template-ui/src/views/Home.vue
index 5851e6667..f55b94a0d 100644
--- a/packages/template-ui/src/views/Home.vue
+++ b/packages/template-ui/src/views/Home.vue
@@ -20,7 +20,20 @@
       <EkCardGridPlaceholder />
     </template>
     <template v-else>
-      <FilterContent v-if="hasFilters" />
+
+      <b-container>
+        <b-row alignH="between">
+          <b-col>
+            <b-form-checkbox v-model="hideUnavailableItems" name="check-only-downloaded" switch>
+              Only downloaded items
+            </b-form-checkbox>
+          </b-col>
+
+          <b-col v-if="hasFilters">
+            <FilterContent />
+          </b-col>
+        </b-row>
+      </b-container>
 
       <template v-if="isFilterEmpty">
         <template v-if="contentNodes.nodes.length">
@@ -73,6 +86,7 @@ export default {
       loadingCarouselNodes: true,
       loadingContentNodes: true,
       loadingSectionNodes: true,
+      hideUnavailableItems: window.kolibri.defaultHideUnavailable,
     };
   },
   computed: {
@@ -100,6 +114,13 @@ export default {
     mainSections() {
       return this.fetchSectionNodes();
     },
+    hideUnavailableItems() {
+      return Promise.all([
+        this.fetchCarouselNodes(),
+        this.fetchContentNodes(),
+        this.fetchSectionNodes(),
+      ]);
+    },
   },
   mounted() {
     return Promise.all([
@@ -115,8 +136,10 @@ export default {
       }
       this.loadingCarouselNodes = true;
       if (this.carouselNodeIds.length) {
-        return window.kolibri.getContentByFilter({ ids: this.carouselNodeIds })
-          .then((page) => {
+        return window.kolibri.getContentByFilter({
+          ids: this.carouselNodeIds,
+          includeUnavailable: !this.hideUnavailableItems,
+        }).then((page) => {
             this.carouselNodes = page.results;
             this.loadingCarouselNodes = false;
           });
@@ -138,6 +161,7 @@ export default {
       return window.kolibri.getContentByFilter({
         ...options,
           maxResults: constants.ItemsPerPage,
+          includeUnavailable: !this.hideUnavailableItems,
       })
         .then((pageResult) => {
           this.contentNodes = {
@@ -160,6 +184,7 @@ export default {
         return window.kolibri.getContentByFilter({
             parent: section.id,
             maxResults: sectionPageSize,
+            includeUnavailable: !this.hideUnavailableItems,
           })
           .then((pageResult) => {
             this.$set(this.sectionNodes, section.id, {
@@ -177,7 +202,10 @@ export default {
       if (!hasMoreNodes) {
         return null;
       }
-      return window.kolibri.getContentPage(pagination).then((pageResult) => {
+      return window.kolibri.getContentPage({
+        ...pagination,
+        ...(!this.hideUnavailableItems && { no_available_filtering: true }),
+      }).then((pageResult) => {
         this.$set(this.sectionNodes, sectionId, {
           nodes: nodes.concat(pageResult.results),
           hasMoreNodes: pageResult.more !== null,
@@ -190,7 +218,10 @@ export default {
       if (!hasMoreNodes) {
         return null;
       }
-      return window.kolibri.getContentPage(pagination).then((pageResult) => {
+      return window.kolibri.getContentPage({
+        ...pagination,
+        ...(!this.hideUnavailableItems && { no_available_filtering: true }),
+      }).then((pageResult) => {
         this.contentNodes = {
           nodes: nodes.concat(pageResult.results),
           hasMoreNodes: pageResult.more !== null,

From e54ed2ccc849848ff146807614a74c15d53eb3f4 Mon Sep 17 00:00:00 2001
From: Georges Basile Stavracas Neto <georges.stavracas@gmail.com>
Date: Thu, 15 Jun 2023 11:47:23 -0300
Subject: [PATCH 3/4] Home: Hide empty sections

Previous commit added the ability to filter out
cards that are not available. That's good, we want
that feature.

What we don't want is empty sections with just the
title, after all cards have been filtered out :)

Hide empty sections.
---
 packages/template-ui/src/views/Home.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/template-ui/src/views/Home.vue b/packages/template-ui/src/views/Home.vue
index f55b94a0d..f6ee0934e 100644
--- a/packages/template-ui/src/views/Home.vue
+++ b/packages/template-ui/src/views/Home.vue
@@ -51,6 +51,7 @@
           :key="section.id"
         >
           <EkCardGrid
+            v-if="sectionNodes[section.id].nodes.length"
             :id="section.id"
             :nodes="sectionNodes[section.id].nodes"
             :hasMoreNodes="sectionNodes[section.id].hasMoreNodes"

From 8e4bec936f9fb07d677ebb9cd9e27020d9c96a71 Mon Sep 17 00:00:00 2001
From: Georges Basile Stavracas Neto <georges.stavracas@gmail.com>
Date: Thu, 15 Jun 2023 13:06:25 -0300
Subject: [PATCH 4/4] WIP

---
 .../template-ui/src/views/ListSection.vue     | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/template-ui/src/views/ListSection.vue b/packages/template-ui/src/views/ListSection.vue
index 9517ac6d0..f8c9eeb75 100644
--- a/packages/template-ui/src/views/ListSection.vue
+++ b/packages/template-ui/src/views/ListSection.vue
@@ -4,6 +4,18 @@
   >
     <ChannelHeader :section="section" />
 
+    <b-container v-if="false">
+      <div class="my-4">
+        <b-form-checkbox
+          v-model="hideUnavailableItems"
+          name="check-only-downloaded"
+          switch
+        >
+          Only downloaded items
+        </b-form-checkbox>
+      </div>
+    </b-container>
+
     <div v-if="isInlineLevel">
       <template v-if="loadingSubsectionNodes">
         <EkCardGridPlaceholder
@@ -71,6 +83,7 @@ export default {
     return {
       subsectionNodes: { nodes: [], hasMoreNodes: false, pagination: null },
       loadingSubsectionNodes: true,
+      hideUnavailableItems: window.kolibri.defaultHideUnavailable,
     };
   },
   computed: {
@@ -92,6 +105,10 @@ export default {
         this.loadInlineLevel();
       }
     },
+    hideUnavailableItems() {
+      console.log("Switched again!");
+      return this.fetchSubsectionNodes();
+    },
   },
   mounted() {
     if (this.isInlineLevel) {
@@ -115,6 +132,7 @@ export default {
         return window.kolibri.getContentByFilter({
           parent: subsection.id,
           maxResults: sectionPageSize,
+          includeUnavailable: !this.hideUnavailableItems,
         })
           .then((pageResult) => {
             this.$set(this.subsectionNodes, subsection.id, {
@@ -132,7 +150,10 @@ export default {
       if (!hasMoreNodes) {
         return null;
       }
-      return window.kolibri.getContentPage(pagination).then((pageResult) => {
+      return window.kolibri.getContentPage({
+        ...pagination,
+        ...(!this.hideUnavailableItems && { no_available_filtering: true }),
+      }).then((pageResult) => {
         this.$set(this.subsectionNodes, sectionId, {
           nodes: nodes.concat(pageResult.results),
           hasMoreNodes: pageResult.more !== null,