AIRAVATA-2537 Factored pagination logic into helper class
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/d18376ba Tree: http://git-wip-us.apache.org/repos/asf/airavata-django-portal/tree/d18376ba Diff: http://git-wip-us.apache.org/repos/asf/airavata-django-portal/diff/d18376ba Branch: refs/heads/master Commit: d18376ba11775d33f2f16af8729d2c9d40ca5346 Parents: 4df20b6 Author: Marcus Christie <[email protected]> Authored: Sun Oct 15 13:46:03 2017 -0400 Committer: Marcus Christie <[email protected]> Committed: Sun Oct 15 13:46:03 2017 -0400 ---------------------------------------------------------------------- .../js/services/ProjectService.js | 29 +--------- .../js/utils/PaginationIterator.js | 43 ++++++++++++++ .../js/views/ProjectListContainer.vue | 59 ++++++-------------- 3 files changed, 64 insertions(+), 67 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/airavata-django-portal/blob/d18376ba/django_airavata/apps/workspace/static/django_airavata_workspace/js/services/ProjectService.js ---------------------------------------------------------------------- diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/services/ProjectService.js b/django_airavata/apps/workspace/static/django_airavata_workspace/js/services/ProjectService.js index 4d51c59..3712181 100644 --- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/services/ProjectService.js +++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/services/ProjectService.js @@ -1,43 +1,20 @@ import Project from '../models/Project' +import PaginationIterator from '../utils/PaginationIterator' class ProjectService { list(data = {}) { if (data && data.results) { - let projects = data.results.map(result => new Project(result)); - this.next = data.next; - this.previous = data.previous; - return Promise.resolve({ - projects: projects, - next: this.next, - previous: this.previous - }); + return Promise.resolve(new PaginationIterator(data, Project)); } else { return fetch('/api/projects', { credentials: 'include' }) .then(response => response.json()) - .then(json => { - this.next = json.next; - this.previous = json.previous; - let projects = json.results.map(project => new Project(project)); - return { - projects: projects, - next: this.next, - previous: this.previous - } - }); + .then(json => new PaginationIterator(json, Project)); } } - listNext() { - // TODO - } - - listPrevious() { - // TODO - } - create() { // TODO } http://git-wip-us.apache.org/repos/asf/airavata-django-portal/blob/d18376ba/django_airavata/apps/workspace/static/django_airavata_workspace/js/utils/PaginationIterator.js ---------------------------------------------------------------------- diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/utils/PaginationIterator.js b/django_airavata/apps/workspace/static/django_airavata_workspace/js/utils/PaginationIterator.js new file mode 100644 index 0000000..438c616 --- /dev/null +++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/utils/PaginationIterator.js @@ -0,0 +1,43 @@ + +export default class PaginationIterator { + + constructor(pagedResponse, resultType = null) { + this.resultType = resultType; + this.processResponse(pagedResponse); + } + + next() { + return fetch(this._next, { + credentials: 'include' + }) + .then(response => response.json()) + .then(json => this.processResponse(json)); + } + + hasNext() { + return this._next != null; + } + + previous() { + return fetch(this._previous, { + credentials: 'include' + }) + .then(response => response.json()) + .then(json => this.processResponse(json)); + } + + hasPrevious() { + return this._previous != null; + } + + processResponse(pagedResponse) { + this._next = pagedResponse.next; + this._previous = pagedResponse.previous; + if (this.resultType) { + this.results = pagedResponse.results.map(result => new this.resultType(result)); + } else { + this.results = pagedResponse.results; + } + return this; + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/airavata-django-portal/blob/d18376ba/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 b384a00..3785d38 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,10 +1,10 @@ <template> <div> <project-list v-bind:projects="projects"></project-list> - <div v-if="next"> + <div v-if="hasNext"> <a href="#" v-on:click.prevent="nextProjects">Next</a> </div> - <div v-if="previous"> + <div v-if="hasPrevious"> <a href="#" v-on:click.prevent="previousProjects">Previous</a> </div> </div> @@ -20,57 +20,34 @@ export default { name: 'project-list-container', data () { return { - projects: null, - next: null, - previous: null, + projectsPaginator: null, } }, components: { ProjectList }, methods: { - // TODO: refactor these two methods since they are practically the same nextProjects: function(event) { - fetch(this.next, { - credentials: 'include' - }) - .then(response => response.json()) - .then(json => { - this.next = json.next; - this.previous = json.previous; - this.projects = json.results.map(project => new Project(project)); - }); + this.projectsPaginator.next(); }, previousProjects: function(event) { - fetch(this.previous, { - credentials: 'include' - }) - .then(response => response.json()) - .then(json => { - this.next = json.next; - this.previous = json.previous; - this.projects = json.results.map(project => new Project(project)); - }); + this.projectsPaginator.previous(); }, }, - beforeMount: function () { - if (this.initialProjectsData) { - // TODO: Initialize project list iterator - ProjectService.list(this.initialProjectsData) - .then(result => { - this.projects = result.projects; - this.next = result.next; - this.previous = result.previous; - }); - } else { - ProjectService.list() - .then(result => { - this.projects = result.projects; - this.next = result.next; - this.previous = result.previous; - }); + computed: { + 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(); } - // TODO: load projects if initialProjectsData is null + }, + beforeMount: function () { + ProjectService.list(this.initialProjectsData) + .then(result => this.projectsPaginator = result); } } </script>
