From f93d47964252714bc3cc461775f770035c839dae Mon Sep 17 00:00:00 2001
From: Alex Velez <alanvele@espol.edu.ec>
Date: Thu, 23 Feb 2023 07:03:31 -0500
Subject: [PATCH] Downloads lists paginated

---
 .../DownloadsList/ConfirmationDeleteModal.vue |  56 +++++
 .../PaginatedListContainerWithBackend.vue     | 132 +++++++++++
 .../DownloadsList/SelectionBottomBar.vue      |  64 ++++++
 .../assets/src/views/DownloadsList/index.vue  | 213 ++++++++++++++++++
 .../assets/src/views/MyDownloads.vue          |   5 +-
 5 files changed, 469 insertions(+), 1 deletion(-)
 create mode 100644 kolibri/plugins/my_downloads/assets/src/views/DownloadsList/ConfirmationDeleteModal.vue
 create mode 100644 kolibri/plugins/my_downloads/assets/src/views/DownloadsList/PaginatedListContainerWithBackend.vue
 create mode 100644 kolibri/plugins/my_downloads/assets/src/views/DownloadsList/SelectionBottomBar.vue
 create mode 100644 kolibri/plugins/my_downloads/assets/src/views/DownloadsList/index.vue

diff --git a/kolibri/plugins/my_downloads/assets/src/views/DownloadsList/ConfirmationDeleteModal.vue b/kolibri/plugins/my_downloads/assets/src/views/DownloadsList/ConfirmationDeleteModal.vue
new file mode 100644
index 00000000000..50097e105e5
--- /dev/null
+++ b/kolibri/plugins/my_downloads/assets/src/views/DownloadsList/ConfirmationDeleteModal.vue
@@ -0,0 +1,56 @@
+<template>
+
+  <KModal
+    :title="$tr('removeFromLibrary')"
+    :submitText="$tr('remove')"
+    :cancelText="coreString('cancelAction')"
+    @submit="removeResources"
+    @cancel="$emit('cancel')"
+  >
+    You will no longer be able to use this resource, but you can download 
+    it again later when it’s available around you.
+  </KModal>
+
+</template>
+
+
+<script>
+
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+
+  export default {
+    name: 'ConfirmationDeleteModal',
+    mixins: [commonCoreStrings],
+    props: {
+      resourcesToDelete: {
+        type: Array,
+        required: true,
+      },
+    },
+    methods: {
+      removeResources() {
+        console.log('Removing', this.resourcesToDelete);
+        this.$emit('success');
+      },
+    },
+    $trs: {
+      removeFromLibrary: {
+        message: 'Remove from library',
+        context:
+          'Title of the modal that appears when the user tries to remove a resource from the library.',
+      },
+      remove: {
+        message: 'Remove',
+        context: 'An action that describes removing some resources.',
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+</style>
diff --git a/kolibri/plugins/my_downloads/assets/src/views/DownloadsList/PaginatedListContainerWithBackend.vue b/kolibri/plugins/my_downloads/assets/src/views/DownloadsList/PaginatedListContainerWithBackend.vue
new file mode 100644
index 00000000000..ea2ea1e08f7
--- /dev/null
+++ b/kolibri/plugins/my_downloads/assets/src/views/DownloadsList/PaginatedListContainerWithBackend.vue
@@ -0,0 +1,132 @@
+<template>
+
+  <div>
+    <KGrid>
+      <KGridItem :layout12="{ span: 7 }">
+        <slot name="otherFilter"></slot>
+      </KGridItem>
+      <KGridItem
+        :layout12="{ span: 5, alignment: 'right' }"
+        class="text-filter"
+      >
+        <slot name="filter"></slot>
+      </KGridItem>
+    </KGrid>
+
+    <div>
+      <slot>
+      </slot>
+    </div>
+
+    <nav class="pagination-nav">
+      <span dir="auto" class="pagination-label">
+        {{ $translate('pagination', { visibleStartRange, visibleEndRange, numFilteredItems }) }}
+      </span>
+      <KButtonGroup>
+        <KIconButton
+          :ariaLabel="$translate('previousResults')"
+          :disabled="previousButtonDisabled"
+          size="small"
+          icon="back"
+          @click="changePage(-1)"
+        />
+        <KIconButton
+          :ariaLabel="$translate('nextResults')"
+          :disabled="nextButtonDisabled"
+          size="small"
+          icon="forward"
+          @click="changePage(+1)"
+        />
+      </KButtonGroup>
+    </nav>
+  </div>
+
+</template>
+
+
+<script>
+
+  import clamp from 'lodash/clamp';
+  import PaginatedListContainer from 'kolibri.coreVue.components.PaginatedListContainer';
+  import { crossComponentTranslator } from 'kolibri.utils.i18n';
+
+  export default {
+    name: 'PaginatedListContainerWithBackend',
+    props: {
+      itemsPerPage: {
+        type: Number,
+        required: true,
+      },
+      totalPageNumber: {
+        type: Number,
+        required: true,
+      },
+      value: {
+        type: Number,
+        required: true,
+      },
+      numFilteredItems: {
+        type: Number,
+        required: true,
+      },
+    },
+    computed: {
+      startRange() {
+        return (this.value - 1) * this.itemsPerPage;
+      },
+      visibleStartRange() {
+        return Math.min(this.startRange + 1, this.numFilteredItems);
+      },
+      endRange() {
+        return this.value * this.itemsPerPage;
+      },
+      visibleEndRange() {
+        return Math.min(this.endRange, this.numFilteredItems);
+      },
+      previousButtonDisabled() {
+        return this.value === 1 || this.numFilteredItems === 0;
+      },
+      nextButtonDisabled() {
+        return (
+          this.totalPageNumber === 1 ||
+          this.value === this.totalPageNumber ||
+          this.numFilteredItems === 0
+        );
+      },
+    },
+    beforeCreate() {
+      this.$translator = crossComponentTranslator(PaginatedListContainer);
+    },
+    methods: {
+      changePage(change) {
+        // Clamp the newPage number between the bounds if browser doesn't correctly
+        // disable buttons (see #6454 issue with old versions of MS Edge)
+        this.$emit('input', clamp(this.value + change, 1, this.totalPageNumber));
+      },
+      $translate(msg, params) {
+        return this.$translator.$tr(msg, params);
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .pagination-nav {
+    margin-bottom: 8px;
+    text-align: right;
+  }
+
+  .text-filter {
+    margin-top: 14px;
+  }
+
+  .pagination-label {
+    position: relative;
+    top: -2px;
+    display: inline;
+  }
+
+</style>
diff --git a/kolibri/plugins/my_downloads/assets/src/views/DownloadsList/SelectionBottomBar.vue b/kolibri/plugins/my_downloads/assets/src/views/DownloadsList/SelectionBottomBar.vue
new file mode 100644
index 00000000000..b05f5984afb
--- /dev/null
+++ b/kolibri/plugins/my_downloads/assets/src/views/DownloadsList/SelectionBottomBar.vue
@@ -0,0 +1,64 @@
+<template>
+
+  <BottomAppBar>
+    <span class="message">
+      {{ $tr('resourcesSelectedMessage', { count: count, size: size }) }}
+    </span>
+    <KButton
+      :disabled="buttonsDisabled"
+      :text="$tr('remove')"
+      @click="$emit('click-remove')"
+    />
+  </BottomAppBar>
+
+</template>
+
+
+<script>
+
+  import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
+
+  export default {
+    name: 'SelectionBottomBar',
+    components: {
+      BottomAppBar,
+    },
+    props: {
+      count: {
+        type: Number,
+        required: true,
+      },
+      size: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      buttonsDisabled() {
+        return this.count === 0;
+      },
+    },
+    $trs: {
+      resourcesSelectedMessage: {
+        message:
+          'Selected: {count, number} {count, plural, one {resource} other {resources}} ({size})',
+        context: 'Indicates how many resources have been selected to be deleted.\n',
+      },
+      remove: {
+        message: 'Remove selected',
+        context: 'Action to remove selected resources',
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .message {
+    display: inline-block;
+    margin-right: 16px;
+  }
+
+</style>
diff --git a/kolibri/plugins/my_downloads/assets/src/views/DownloadsList/index.vue b/kolibri/plugins/my_downloads/assets/src/views/DownloadsList/index.vue
new file mode 100644
index 00000000000..a8f36a38ac9
--- /dev/null
+++ b/kolibri/plugins/my_downloads/assets/src/views/DownloadsList/index.vue
@@ -0,0 +1,213 @@
+<template>
+
+  <form>
+
+    <PaginatedListContainerWithBackend
+      v-model="currentPage"
+      :itemsPerPage="itemsPerPage"
+      :totalPageNumber="totalPageNumber"
+      :numFilteredItems="numFilteredItems"
+    >
+      <CoreTable>
+        <template #headers>
+          <th>
+            <KCheckbox
+              showLabel
+              class="select-all"
+              :label="$tr('name')"
+              :checked="allAreSelected"
+              :disabled="false && (!downloads || downloads.length === 0)"
+              :style="{ color: $themeTokens.annotation }"
+              @change="selectAll($event)"
+            />
+          </th>
+          <th> File size </th>
+          <th> Date added </th>
+        </template>
+        <template #tbody>
+          <tbody>
+            <tr>
+              <td>
+                <KCheckbox
+                  :checked="resourceIsSelected(1)"
+                  class="download-checkbox"
+                  data-test="userCheckbox"
+                  @change="handleCheckResource(1, $event)"
+                >
+                  <KLabeledIcon
+                    :icon="'watchSolid'"
+                    :label="'Resource 1 Watch this video'"
+                  />
+                </KCheckbox>
+              </td>
+              <td>
+                f
+              </td>
+              <td>zz</td>
+              <td class="resource-action">
+                <KButton
+                  :text="$tr('view')"
+                  appearance="flat-button"
+                  @click="viewResource(1)"
+                />
+              </td>
+              <td class="resource-action">
+                <KButton
+                  :text="$tr('remove')"
+                  appearance="flat-button"
+                  @click="removeResource(1)"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </template>
+      </CoreTable>
+    </PaginatedListContainerWithBackend>
+    <SelectionBottomBar
+      :count="selectedDownloads.length"
+      :size="'1.2 GB'"
+      @click-remove="resourcesToDelete = selectedDownloads"
+    />
+    <ConfirmationDeleteModal
+      v-if="resourcesToDelete.length"
+      :resourcesToDelete="resourcesToDelete"
+      @cancel="resourcesToDelete = []"
+      @success="resourcesToDelete = []"
+    />
+  </form>
+
+</template>
+
+
+<script>
+
+  import pickBy from 'lodash/pickBy';
+  import CoreTable from 'kolibri.coreVue.components.CoreTable';
+  import SelectionBottomBar from './SelectionBottomBar.vue';
+  import ConfirmationDeleteModal from './ConfirmationDeleteModal.vue';
+  import PaginatedListContainerWithBackend from './PaginatedListContainerWithBackend.vue';
+
+  export default {
+    name: 'DownloadsList',
+    components: {
+      CoreTable,
+      SelectionBottomBar,
+      ConfirmationDeleteModal,
+      PaginatedListContainerWithBackend,
+    },
+    props: {
+      downloads: {
+        type: Array,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        selectedDownloads: [],
+        allAreSelected: false,
+        totalPageNumber: 3,
+        numFilteredItems: 30,
+        resourcesToDelete: [],
+      };
+    },
+    computed: {
+      currentPage: {
+        get() {
+          return Number(this.$route.query.page || 1);
+        },
+        set(value) {
+          this.$router.push({
+            ...this.$route,
+            query: pickBy({
+              ...this.$route.query,
+              page: value,
+            }),
+          });
+        },
+      },
+      itemsPerPage: {
+        get() {
+          return this.$route.query.page_size || 30;
+        },
+        set(value) {
+          this.$router.push({
+            ...this.$route,
+            query: pickBy({
+              ...this.$route.query,
+              page_size: value,
+              page: null,
+            }),
+          });
+        },
+      },
+    },
+    methods: {
+      selectAll() {
+        this.allAreSelected = !this.allAreSelected;
+        if (this.allAreSelected) {
+          this.selectedDownloads = this.downloads;
+        } else {
+          this.selectedDownloads = [];
+        }
+      },
+      handleCheckResource(id, checked) {
+        if (checked) {
+          this.selectedDownloads.push(id);
+          return;
+        }
+        this.selectedDownloads = this.selectedDownloads.filter(resourceId => resourceId !== id);
+      },
+      resourceIsSelected(id) {
+        return this.selectedDownloads.indexOf(id) !== -1;
+      },
+      viewResource(id) {
+        console.log('view resource', id);
+      },
+      removeResource(id) {
+        console.log('remove resource', id);
+        this.resourcesToDelete = [id];
+      },
+    },
+    $trs: {
+      name: {
+        message: 'Name',
+        context: "Indicates the resource's name",
+      },
+      view: {
+        message: 'View',
+        context: 'Button to view the resource',
+      },
+      remove: {
+        message: 'Remove',
+        context: 'Button to remove the resource',
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scope>
+
+  td {
+    vertical-align: middle !important;
+  }
+
+  .select-all {
+    // This helps the checkbox align with the header text
+    position: relative;
+    top: 16px;
+  }
+
+  .download-checkbox {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    font-weight: bold;
+  }
+
+  .resource-action {
+    max-width: 70px !important;
+    text-align: right;
+  }
+
+</style>
diff --git a/kolibri/plugins/my_downloads/assets/src/views/MyDownloads.vue b/kolibri/plugins/my_downloads/assets/src/views/MyDownloads.vue
index fb877dbd902..bdcf0824dee 100644
--- a/kolibri/plugins/my_downloads/assets/src/views/MyDownloads.vue
+++ b/kolibri/plugins/my_downloads/assets/src/views/MyDownloads.vue
@@ -61,6 +61,7 @@
           />
         </KGridItem>
       </KGrid>
+      <DownloadsList :downloads="[]" />
     </KPageContainer>
   </AppBarPage>
 
@@ -72,11 +73,13 @@
   import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import DownloadsList from './DownloadsList';
 
   export default {
     name: 'MyDownloads',
     components: {
       AppBarPage,
+      DownloadsList,
     },
     mixins: [commonCoreStrings, responsiveWindowMixin],
     data() {
@@ -185,7 +188,7 @@
 <style lang="scss" scoped>
 
   .container {
-    min-height: 600px;
+    min-height: 450px;
   }
 
   .selector {