Downloads lists paginated

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>

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>

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>