AIRAVATA-2537 Implement simple pagination
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/30e9ce3c Tree: http://git-wip-us.apache.org/repos/asf/airavata-django-portal/tree/30e9ce3c Diff: http://git-wip-us.apache.org/repos/asf/airavata-django-portal/diff/30e9ce3c Branch: refs/heads/master Commit: 30e9ce3c6f35d51d7416da9da772b3b83f8cb26c Parents: f4367b0 Author: Marcus Christie <[email protected]> Authored: Sat Oct 14 10:09:16 2017 -0400 Committer: Marcus Christie <[email protected]> Committed: Sat Oct 14 10:09:16 2017 -0400 ---------------------------------------------------------------------- .../js/entry-project-list.js | 6 +-- .../js/models/BaseModel.js | 6 +++ .../js/models/Project.js | 7 ++++ .../js/views/ProjectListContainer.vue | 42 ++++++++++++++++++-- .../projects_list.html | 2 +- 5 files changed, 56 insertions(+), 7 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/airavata-django-portal/blob/30e9ce3c/django_airavata/apps/workspace/static/django_airavata_workspace/js/entry-project-list.js ---------------------------------------------------------------------- diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/entry-project-list.js b/django_airavata/apps/workspace/static/django_airavata_workspace/js/entry-project-list.js index 7d771c2..e130aea 100644 --- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/entry-project-list.js +++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/entry-project-list.js @@ -3,7 +3,7 @@ import ProjectListContainer from './views/ProjectListContainer.vue' new Vue({ el: '#project-list', - template: '<project-list-container v-bind:initialProjects="projects"></project-list-container>', + template: '<project-list-container v-bind:initialProjectsData="projectsData"></project-list-container>', data: { projects: null }, @@ -11,8 +11,8 @@ new Vue({ ProjectListContainer }, beforeMount: function () { - if (this.$el.dataset.projects) { - this.projects = JSON.parse(this.$el.dataset.projects); + if (this.$el.dataset.projectsData) { + this.projectsData = JSON.parse(this.$el.dataset.projectsData); } } }) http://git-wip-us.apache.org/repos/asf/airavata-django-portal/blob/30e9ce3c/django_airavata/apps/workspace/static/django_airavata_workspace/js/models/BaseModel.js ---------------------------------------------------------------------- diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/models/BaseModel.js b/django_airavata/apps/workspace/static/django_airavata_workspace/js/models/BaseModel.js new file mode 100644 index 0000000..e61a1bc --- /dev/null +++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/models/BaseModel.js @@ -0,0 +1,6 @@ + +export default class BaseModel { + constructor(data = {}) { + Object.assign(this, data); + } +} http://git-wip-us.apache.org/repos/asf/airavata-django-portal/blob/30e9ce3c/django_airavata/apps/workspace/static/django_airavata_workspace/js/models/Project.js ---------------------------------------------------------------------- diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/models/Project.js b/django_airavata/apps/workspace/static/django_airavata_workspace/js/models/Project.js new file mode 100644 index 0000000..04b2ad4 --- /dev/null +++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/models/Project.js @@ -0,0 +1,7 @@ +import BaseModel from './BaseModel'; + +export default class Project extends BaseModel { + constructor(data = {}) { + super(data); + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/airavata-django-portal/blob/30e9ce3c/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 47d1b5f..271dd5d 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,20 +1,56 @@ <template> - <project-list v-bind:projects="projects"></project-list> + <div> + <project-list v-bind:projects="projects"></project-list> + <div v-if="next"> + <a href="#" v-on:click.prevent="nextProjects">Next</a> + </div> + <div v-if="previous"> + <a href="#" v-on:click.prevent="previousProjects">Previous</a> + </div> + </div> </template> <script> +import Project from '../models/Project'; import ProjectList from './ProjectList.vue' export default { - props: ['initialProjects'], + props: ['initialProjectsData'], name: 'project-list-container', data () { return { - projects: this.initialProjects + projects: this.initialProjectsData.results, + next: this.initialProjectsData.next, + previous: this.initialProjectsData.previous, } }, 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)); + }); + }, + 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)); + }); + }, } } </script> http://git-wip-us.apache.org/repos/asf/airavata-django-portal/blob/30e9ce3c/django_airavata/apps/workspace/templates/django_airavata_workspace/projects_list.html ---------------------------------------------------------------------- diff --git a/django_airavata/apps/workspace/templates/django_airavata_workspace/projects_list.html b/django_airavata/apps/workspace/templates/django_airavata_workspace/projects_list.html index 02943e7..e596c0c 100644 --- a/django_airavata/apps/workspace/templates/django_airavata_workspace/projects_list.html +++ b/django_airavata/apps/workspace/templates/django_airavata_workspace/projects_list.html @@ -6,7 +6,7 @@ <h4>Browse Projects</h4> -<div id="project-list" data-projects="{{ projects_data }}"></div> +<div id="project-list" data-projects-data="{{ projects_data }}"></div> {% endblock content %}
