Repository: airavata-django-portal Updated Branches: refs/heads/master c2df89a15 -> bb8eb5bfb
AIRAVATA-2537 Refactored pager UI into component Project: http://git-wip-us.apache.org/repos/asf/airavata-django-portal/repo Commit: http://git-wip-us.apache.org/repos/asf/airavata-django-portal/commit/ae163f58 Tree: http://git-wip-us.apache.org/repos/asf/airavata-django-portal/tree/ae163f58 Diff: http://git-wip-us.apache.org/repos/asf/airavata-django-portal/diff/ae163f58 Branch: refs/heads/master Commit: ae163f5863d53fdb4135fb07084cbd40afa755b3 Parents: c2df89a Author: Marcus Christie <[email protected]> Authored: Mon Oct 16 16:05:01 2017 -0400 Committer: Marcus Christie <[email protected]> Committed: Mon Oct 16 16:05:01 2017 -0400 ---------------------------------------------------------------------- .../js/views/ProjectListContainer.vue | 32 ++--------- .../static/common/js/components/Pager.vue | 56 ++++++++++++++++++++ django_airavata/static/common/js/index.js | 6 +++ 3 files changed, 67 insertions(+), 27 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/airavata-django-portal/blob/ae163f58/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectListContainer.vue ---------------------------------------------------------------------- diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectListContainer.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectListContainer.vue index 171b882..5b87b6e 100644 --- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectListContainer.vue +++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectListContainer.vue @@ -1,22 +1,15 @@ <template> <div> <project-list v-bind:projects="projects"></project-list> - <div> - Showing {{ first }} - {{ last }} - </div> - <div v-if="hasNext"> - <a href="#" v-on:click.prevent="nextProjects">Next</a> - </div> - <div v-if="hasPrevious"> - <a href="#" v-on:click.prevent="previousProjects">Previous</a> - </div> + <pager v-bind:paginator="projectsPaginator" + v-on:next="nextProjects" v-on:previous="previousProjects"></pager> </div> </template> <script> import ProjectList from './ProjectList.vue' -import { services } from 'django-airavata-common' +import { components as comps, services } from 'django-airavata-common' export default { props: ['initialProjectsData'], @@ -27,7 +20,8 @@ export default { } }, components: { - ProjectList + 'project-list': ProjectList, + 'pager': comps.Pager }, methods: { nextProjects: function(event) { @@ -41,22 +35,6 @@ export default { projects: function() { return this.projectsPaginator ? this.projectsPaginator.results : null; }, - hasNext: function() { - return this.projectsPaginator && this.projectsPaginator.hasNext(); - }, - hasPrevious: function() { - return this.projectsPaginator && this.projectsPaginator.hasPrevious(); - }, - first: function() { - return this.projectsPaginator ? this.projectsPaginator.offset + 1 : null; - }, - last: function() { - if (this.projectsPaginator) { - return this.projectsPaginator.offset + this.projectsPaginator.results.length; - } else { - return null; - } - } }, beforeMount: function () { services.ProjectService.list(this.initialProjectsData) http://git-wip-us.apache.org/repos/asf/airavata-django-portal/blob/ae163f58/django_airavata/static/common/js/components/Pager.vue ---------------------------------------------------------------------- diff --git a/django_airavata/static/common/js/components/Pager.vue b/django_airavata/static/common/js/components/Pager.vue new file mode 100644 index 0000000..b3289c0 --- /dev/null +++ b/django_airavata/static/common/js/components/Pager.vue @@ -0,0 +1,56 @@ +<template> + <div class="pager"> + <span class="pager-element" v-if="hasPrevious"> + <a href="#" v-on:click.prevent="getPrevious"><i class="fa fa-chevron-left" aria-hidden="true"></i> Previous</a> + </span> + <span class="pager-element"> + Showing {{ first }} - {{ last }} + </span> + <span class="pager-element" v-if="hasNext"> + <a href="#" v-on:click.prevent="getNext">Next <i class="fa fa-chevron-right" aria-hidden="true"></i></a> + </span> + </div> +</template> + +<script> + +export default { + props: ['paginator'], + name: 'pager', + methods: { + getNext: function() { + this.$emit('next'); + }, + getPrevious: function() { + this.$emit('previous'); + }, + }, + computed: { + hasNext: function() { + return this.paginator && this.paginator.hasNext(); + }, + hasPrevious: function() { + return this.paginator && this.paginator.hasPrevious(); + }, + first: function() { + return this.paginator ? this.paginator.offset + 1 : null; + }, + last: function() { + if (this.paginator) { + return this.paginator.offset + this.paginator.results.length; + } else { + return null; + } + } + }, +} +</script> + +<style scoped> +.pager { + text-align: right; +} +.pager-element + .pager-element { + margin-left: 5px; +} +</style> http://git-wip-us.apache.org/repos/asf/airavata-django-portal/blob/ae163f58/django_airavata/static/common/js/index.js ---------------------------------------------------------------------- diff --git a/django_airavata/static/common/js/index.js b/django_airavata/static/common/js/index.js index 6ee1d22..8b74f3d 100644 --- a/django_airavata/static/common/js/index.js +++ b/django_airavata/static/common/js/index.js @@ -1,9 +1,15 @@ +import Pager from './components/Pager.vue' + import Project from './models/Project' import ProjectService from './services/ProjectService' import PaginationIterator from './utils/PaginationIterator' +exports.components = { + Pager: Pager +} + exports.models = { Project: Project }
