From bfd9a6c72e0d16c45c23e4a5a3488c04a6369884 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Thu, 12 Oct 2023 09:55:20 -0700
Subject: [PATCH 1/4] Update removeDownloadRequest function to take
 contentnode_id as argument.

---
 .../learn/assets/src/composables/useDownloadRequests.js     | 6 +++++-
 .../HybridLearningContentCard/HybridLearningFooter.vue      | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
index f286696c0c7..2dcd3ae5f74 100644
--- a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
+++ b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
@@ -147,7 +147,11 @@ export default function useDownloadRequests(store) {
     return Promise.resolve();
   }
 
-  function removeDownloadRequest(contentRequest) {
+  function removeDownloadRequest(contentNodeId) {
+    const contentRequest = downloadRequestMap[contentNodeId];
+    if (!contentRequest) {
+      return Promise.resolve();
+    }
     ContentRequestResource.deleteModel({
       id: contentRequest.id,
     });
diff --git a/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/HybridLearningFooter.vue b/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/HybridLearningFooter.vue
index 64d60f7a788..ae6eb1d96fa 100644
--- a/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/HybridLearningFooter.vue
+++ b/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/HybridLearningFooter.vue
@@ -196,7 +196,7 @@
         this.disableRequestButtons = false;
       },
       confirmRemoveRequest() {
-        this.removeDownloadRequest(this.contentNode).then(() => {
+        this.removeDownloadRequest(this.contentNode.id).then(() => {
           this.removeConfirmationModalOpen = false;
         });
       },

From dd3e24fcd0c7ef949d2eecc11886ce8672e67ce0 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Thu, 12 Oct 2023 11:19:20 -0700
Subject: [PATCH 2/4] Simplify responsive display. Fix selection behaviour.

---
 .../views/DownloadsList/index.vue             | 231 ++++++------------
 1 file changed, 79 insertions(+), 152 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index 21114bf81d9..24dfcdf5b17 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -8,7 +8,7 @@
       :totalPageNumber="totalPageNumber"
       :numFilteredItems="downloadItemListLength"
     >
-      <CoreTable v-if="windowIsLarge">
+      <CoreTable>
         <template #headers>
           <th>
             <KCheckbox
@@ -16,93 +16,20 @@
               class="select-all"
               :label="coreString('nameLabel')"
               :checked="areAllSelected"
+              :indeterminate="areAnySelected && !areAllSelected"
               :disabled="!areAnyAvailable"
               :style="{ color: $themeTokens.annotation }"
               @change="selectAll($event)"
             />
           </th>
-          <th> {{ coreString('fileSize') }} </th>
-          <th> {{ coreString('dateAdded') }} </th>
-          <th> {{ coreString('statusLabel') }} </th>
-        </template>
-        <template #tbody>
-          <tbody v-if="!loading">
-            <tr
-              v-for="download in paginatedDownloads"
-              :key="download.contentnode_id"
-              :style="download.status !== 'COMPLETED' ? { color: $themeTokens.annotation } : {}"
-            >
-              <td>
-                <KCheckbox
-                  :checked="resourceIsSelected(download)"
-                  class="download-checkbox"
-                  @change="handleCheckResource(download, $event)"
-                >
-                  <KLabeledIcon
-                    v-if="download.metadata"
-                    :icon="getIcon(download.metadata.learning_activities)"
-                    :label="download.metadata.title"
-                    :style="nonCompleteStatus(download) ? { color: $themeTokens.annotation } : {}"
-                  />
-                </KCheckbox>
-              </td>
-              <td>
-                {{ formattedResourceSize(download) }}
-              </td>
-              <td>
-                {{ formatDownloadRequestedDate(download) }}
-              </td>
-              <td>
-                <KIcon
-                  v-if="download.status !== 'IN_PROGRESS'"
-                  :icon="downloadStatusIcon(download)"
-                  :color="download.status === 'PENDING' ? $themeTokens.annotation : null"
-                  class="icon"
-                />
-                <KCircularLoader
-                  v-if="download.status === 'IN_PROGRESS'"
-                  class="icon"
-                />
-                <span class="status-text">{{ formattedDownloadStatus(download) }} </span>
-              </td>
-              <td class="resource-action">
-                <KButton
-                  v-if="nonCompleteStatus(download)"
-                  :text="coreString('viewAction')"
-                  appearance="flat-button"
-                  :disabled="true"
-                />
-                <KExternalLink
-                  v-else
-                  :text="coreString('viewAction')"
-                  appearance="flat-button"
-                  :href="genExternalContentURLBackLinkCurrentPage(download.contentnode_id)"
-                />
-              </td>
-              <td class="resource-action">
-                <KButton
-                  :text="coreString('removeAction')"
-                  appearance="flat-button"
-                  @click="markSingleResourceForRemoval(download)"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </template>
-      </CoreTable>
-      <!-- for small and medium screens, reorganize the table -->
-      <CoreTable v-else>
-        <template #headers>
-          <th>
-            <KCheckbox
-              showLabel
-              class="select-all"
-              :label="coreString('nameLabel')"
-              :checked="areAllSelected"
-              :disabled="!areAnyAvailable"
-              :style="{ color: $themeTokens.annotation }"
-              @change="selectAll($event)"
-            />
+          <th v-if="windowIsLarge">
+            {{ coreString('fileSize') }}
+          </th>
+          <th v-if="windowIsLarge">
+            {{ coreString('dateAdded') }}
+          </th>
+          <th v-if="windowIsLarge">
+            {{ coreString('statusLabel') }}
           </th>
         </template>
         <template #tbody>
@@ -112,11 +39,11 @@
               :key="download.contentnode_id"
               :style="download.status !== 'COMPLETED' ? { color: $themeTokens.annotation } : {}"
             >
-              <td class="small-resource-details">
+              <td :class="{ 'small-resource-details': !windowIsLarge }">
                 <KCheckbox
-                  :checked="resourceIsSelected(download)"
+                  :checked="Boolean(selectedDownloadsMap[download.contentnode_id])"
                   class="download-checkbox"
-                  @change="handleCheckResource(download, $event)"
+                  @change="handleCheckResource(download.contentnode_id, $event)"
                 >
                   <KLabeledIcon
                     v-if="download.metadata"
@@ -125,9 +52,9 @@
                     :style="nonCompleteStatus(download) ? { color: $themeTokens.annotation } : {}"
                   />
                 </KCheckbox>
-                <div class="small-screen-status">
+                <div v-if="!windowIsLarge" class="small-screen-status">
                   <p>
-                    {{ formattedResourceSize(download) }} |
+                    {{ formattedResourceSize(download) }} &nbsp;&nbsp;
                     {{ formatDownloadRequestedDate(download) }}
                   </p>
                   <KIcon
@@ -142,7 +69,25 @@
                   />
                   <span class="status-text">{{ formattedDownloadStatus(download) }} </span>
                 </div>
-
+              </td>
+              <td v-if="windowIsLarge">
+                {{ formattedResourceSize(download) }}
+              </td>
+              <td v-if="windowIsLarge">
+                {{ formatDownloadRequestedDate(download) }}
+              </td>
+              <td v-if="windowIsLarge">
+                <KIcon
+                  v-if="download.status !== 'IN_PROGRESS'"
+                  :icon="downloadStatusIcon(download)"
+                  :color="download.status === 'PENDING' ? $themeTokens.annotation : null"
+                  class="icon"
+                />
+                <KCircularLoader
+                  v-if="download.status === 'IN_PROGRESS'"
+                  class="icon"
+                />
+                <span class="status-text">{{ formattedDownloadStatus(download) }} </span>
               </td>
               <td class="resource-action">
                 <KButton
@@ -172,9 +117,9 @@
       </p>
     </PaginatedListContainerWithBackend>
     <SelectionBottomBar
-      :count="selectedDownloads.length"
-      :size="formattedSelectedSize()"
-      @click-remove="resourcesToDelete = selectedDownloads"
+      :count="Object.keys(selectedDownloadsMap).length"
+      :size="formattedSelectedSize"
+      @click-remove="removeSelectedResources"
     />
     <ConfirmationDeleteModal
       v-if="resourcesToDelete.length"
@@ -251,8 +196,7 @@
     data() {
       return {
         now: now(),
-        selectedDownloadsSize: 0,
-        selectedDownloads: [],
+        selectedDownloadsMap: {},
         resourcesToDelete: [],
       };
     },
@@ -295,32 +239,19 @@
           }
           return true;
         });
-
-        if (sort) {
-          switch (sort) {
-            case 'newest':
-              downloadsToDisplay.sort(
-                (a, b) => new Date(b.requested_at) - new Date(a.requested_at)
-              );
-              break;
-            case 'oldest':
-              downloadsToDisplay.sort(
-                (a, b) => new Date(a.requested_at) - new Date(b.requested_at)
-              );
-              break;
-            case 'smallest':
-              downloadsToDisplay.sort((a, b) => a.metadata.file_size - b.metadata.file_size);
-              break;
-            case 'largest':
-              downloadsToDisplay.sort((a, b) => b.metadata.file_size - a.metadata.file_size);
-              break;
-            default:
-              break;
+        downloadsToDisplay.sort((a, b) => {
+          if (sort === 'oldest') {
+            return new Date(a.requested_at) - new Date(b.requested_at);
           }
-        } else {
-          // if no sort value, default to newest downloads shown first in the UI
-          downloadsToDisplay.sort((a, b) => new Date(b.requested_at) - new Date(a.requested_at));
-        }
+          if (sort === 'smallest') {
+            return a.metadata.file_size - b.metadata.file_size;
+          }
+          if (sort === 'largest') {
+            return b.metadata.file_size - a.metadata.file_size;
+          }
+          // By default always sort by newest.
+          return new Date(b.requested_at) - new Date(a.requested_at);
+        });
         return downloadsToDisplay;
       },
       paginatedDownloads() {
@@ -328,9 +259,8 @@
           const startIndex = (this.currentPage - 1) * this.itemsPerPage;
           const endIndex = startIndex + this.itemsPerPage;
           return this.downloads.slice(startIndex, endIndex);
-        } else {
-          return [];
         }
+        return [];
       },
       downloadItemListLength() {
         return this.downloads ? this.downloads.length : 0;
@@ -343,58 +273,58 @@
       },
       areAllSelected() {
         return (
-          this.downloads &&
-          this.downloads.filter(id => this.selectedDownloads.includes(id)).length > 0
+          this.areAnySelected &&
+          this.paginatedDownloads.every(download =>
+            Boolean(this.selectedDownloadsMap[download.contentnode_id])
+          )
+        );
+      },
+      areAnySelected() {
+        return this.paginatedDownloads.some(download =>
+          Boolean(this.selectedDownloadsMap[download.contentnode_id])
         );
       },
       areAnyAvailable() {
-        return this.downloads && this.downloads.length > 0;
+        return this.paginatedDownloads.length > 0;
       },
-    },
-    watch: {
-      selectedDownloads(newVal) {
-        this.selectedDownloadsSize = newVal.reduce(
-          (acc, object) => acc + object.metadata.file_size,
-          0
+      formattedSelectedSize() {
+        return bytesForHumans(
+          Object.keys(this.selectedDownloadsMap).reduce((acc, contentnode_id) => {
+            return acc + (this.downloadRequestMap[contentnode_id]?.metadata?.file_size || 0);
+          }, 0)
         );
       },
     },
-    mounted() {
-      this.areAnyAvailable;
-    },
     methods: {
       nonCompleteStatus(download) {
         return download.status !== 'COMPLETED';
       },
       selectAll() {
-        if (this.areAllSelected) {
-          this.selectedDownloads = this.selectedDownloads.filter(
-            download => !this.paginatedDownloads.includes(download)
-          );
-        } else {
-          this.selectedDownloads = this.selectedDownloads.concat(
-            this.paginatedDownloads.filter(download => !this.selectedDownloads.includes(download))
-          );
+        const notAllSelected = !this.areAllSelected;
+        for (const download of this.paginatedDownloads) {
+          this.handleCheckResource(download.contentnode_id, notAllSelected);
         }
       },
-      handleCheckResource(id, checked) {
+      handleCheckResource(contentnode_id, checked) {
         if (checked) {
-          this.selectedDownloads = this.selectedDownloads.concat(id);
-          return;
+          this.$set(this.selectedDownloadsMap, contentnode_id, checked);
+        } else {
+          this.$delete(this.selectedDownloadsMap, contentnode_id);
         }
-        this.selectedDownloads = this.selectedDownloads.filter(resourceId => resourceId !== id);
-      },
-      resourceIsSelected(id) {
-        return this.selectedDownloads.indexOf(id) !== -1;
       },
       markSingleResourceForRemoval(download) {
         this.resourcesToDelete.push(download);
       },
+      removeSelectedResources() {
+        this.resourcesToDelete = this.downloads.filter(download =>
+          Boolean(this.selectedDownloadsMap[download.contentnode_id])
+        );
+      },
       emitCurrentlySelectedResourcesForRemoval() {
         this.$emit('removeResources', this.resourcesToDelete);
         this.resourcesToDelete = [];
         this.$nextTick(() => {
-          this.selectedDownloads = [];
+          this.selectedDownloadsMap = {};
           if (this.paginatedDownloads.length == 0 && this.$route.query.page) {
             const prevPage = this.currentPage - 1;
             this.currentPage = prevPage;
@@ -463,9 +393,6 @@
           return bytesForHumans(download.metadata.file_size);
         }
       },
-      formattedSelectedSize() {
-        return bytesForHumans(this.selectedDownloadsSize);
-      },
     },
   };
 

From 40acc47cf6d498905c7bd18040be815168792217 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Fri, 13 Oct 2023 07:41:21 -0700
Subject: [PATCH 3/4] Fix content download request removal for MyDownloads
 page.

---
 .../assets/src/my_downloads/views/DownloadsList/index.vue   | 6 ++----
 .../learn/assets/src/my_downloads/views/MyDownloads.vue     | 6 +++---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index 24dfcdf5b17..765f8cc03d8 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -313,12 +313,10 @@
         }
       },
       markSingleResourceForRemoval(download) {
-        this.resourcesToDelete.push(download);
+        this.resourcesToDelete.push(download.contentnode_id);
       },
       removeSelectedResources() {
-        this.resourcesToDelete = this.downloads.filter(download =>
-          Boolean(this.selectedDownloadsMap[download.contentnode_id])
-        );
+        this.resourcesToDelete = Object.keys(this.selectedDownloadsMap);
       },
       emitCurrentlySelectedResourcesForRemoval() {
         this.$emit('removeResources', this.resourcesToDelete);
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
index f9d64353031..6a7071cadb7 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
@@ -119,9 +119,9 @@
           return bytesForHumans(0);
         }
       },
-      removeResources(resources) {
-        for (const resource of resources) {
-          this.removeDownloadRequest(resource);
+      removeResources(contentNodeIds) {
+        for (const contentNodeId of contentNodeIds) {
+          this.removeDownloadRequest(contentNodeId);
         }
       },
     },

From 98a8ca985cc9d8c1f4e3bdaf89161f57039caafb Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Fri, 13 Oct 2023 10:13:05 -0700
Subject: [PATCH 4/4] Show snackbar when resource is removed.

---
 .../learn/assets/src/composables/useDownloadRequests.js     | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
index 2dcd3ae5f74..6229cc9a5eb 100644
--- a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
+++ b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
@@ -156,6 +156,12 @@ export default function useDownloadRequests(store) {
       id: contentRequest.id,
     });
     Vue.delete(downloadRequestMap, contentRequest.contentnode_id);
+    store.commit('CORE_CREATE_SNACKBAR', {
+      text: downloadRequestsTranslator.$tr('resourceRemoved'),
+      backdrop: false,
+      forceReuse: true,
+      autoDismiss: true,
+    });
     return Promise.resolve();
   }