You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ma...@apache.org on 2017/11/19 17:46:43 UTC
[airavata-django-portal] branch master updated: AIRAVATA-2538
Factored new project button/modal to component
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
The following commit(s) were added to refs/heads/master by this push:
new 2dbf0bc AIRAVATA-2538 Factored new project button/modal to component
2dbf0bc is described below
commit 2dbf0bca21a8c76d6b82b346d72cebe0c0ce63a9
Author: Marcus Christie <ma...@iu.edu>
AuthorDate: Sun Nov 19 12:46:31 2017 -0500
AIRAVATA-2538 Factored new project button/modal to component
---
.../js/views/ProjectButtonNew.vue | 95 ++++++++++++++++++++++
.../js/views/ProjectListContainer.vue | 71 ++--------------
2 files changed, 102 insertions(+), 64 deletions(-)
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectButtonNew.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectButtonNew.vue
new file mode 100644
index 0000000..3654f80
--- /dev/null
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectButtonNew.vue
@@ -0,0 +1,95 @@
+
+<template>
+ <div>
+ <b-btn v-b-modal.modal-new-project variant="primary">
+ <slot>
+ New Project <i class="fa fa-plus" aria-hidden="true"></i>
+ </slot>
+ </b-btn>
+ <b-modal id="modal-new-project" ref="modalNewProject" title="Create New Project" v-on:ok="onCreateProject">
+ <b-form @submit="onCreateProject" @input="onUserInput" novalidate>
+ <b-form-group label="Project Name" label-for="new-project-name" v-bind:feedback="newProjectNameFeedback" v-bind:state="newProjectNameState">
+ <b-form-input id="new-project-name"
+ type="text" v-model="newProject.name" required
+ placeholder="Project name"
+ v-bind:state="newProjectNameState"></b-form-input>
+ </b-form-group>
+ <b-form-group label="Project Description" label-for="new-project-description">
+ <b-form-textarea id="new-project-description"
+ type="text" v-model="newProject.description"
+ placeholder="(Optional) Project description"
+ :rows="3"></b-form-textarea>
+ </b-form-group>
+ </b-form>
+ </b-modal>
+ </div>
+</template>
+
+<script>
+
+import { models, services } from 'django-airavata-api'
+
+export default {
+ name: 'project-button-new',
+ data () {
+ return {
+ newProject: new models.Project(),
+ newProjectServerValidationData: null,
+ userBeginsInput: false,
+ }
+ },
+ components: {
+ },
+ methods: {
+ onCreateProject: function(event) {
+ // Prevent hiding modal, hide it programmatically when project gets created
+ event.preventDefault();
+ services.ProjectService.create(this.newProject)
+ .then(result => {
+ this.$refs.modalNewProject.hide();
+ this.$emit('new-project', result);
+ // Reset state
+ this.newProject = new models.Project();
+ this.userBeginsInput = false;
+ })
+ .catch(error => {
+ this.newProjectServerValidationData = error.data;
+ });
+ },
+ onUserInput: function(event) {
+ this.userBeginsInput = true;
+ // Clear server side validation data when user starts typing again
+ this.newProjectServerValidationData = null;
+ },
+ },
+ computed: {
+ newProjectValidationData: function() {
+ return this.userBeginsInput ? this.newProject.validateForCreate() : null;
+ },
+ newProjectNameState: function() {
+ if (this.newProjectServerValidationData && 'name' in this.newProjectServerValidationData) {
+ return 'invalid';
+ } else if (this.newProjectValidationData && 'name' in this.newProjectValidationData) {
+ return 'invalid';
+ } else {
+ return null;
+ }
+ },
+ newProjectNameFeedback: function() {
+ if (this.newProjectServerValidationData && 'name' in this.newProjectServerValidationData) {
+ return this.newProjectServerValidationData.name.join('; ');
+ } else if (this.newProjectValidationData && 'name' in this.newProjectValidationData) {
+ return this.newProjectValidationData.name.join('; ');
+ } else {
+ return null;
+ }
+ },
+ },
+}
+</script>
+
+<style>
+/*#modal-new-project {
+ text-align: left;
+}*/
+</style>
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 8948403..17093af 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
@@ -5,24 +5,7 @@
<h1 class="h4 mb-4">Browse Projects</h1>
</div>
<div id="col-new-project" class="col">
- <b-btn v-b-modal.modal-new-project variant="primary">New Project <i class="fa fa-plus" aria-hidden="true"></i></b-btn>
- <!-- TODO: factor modal out into separate, reusable component -->
- <b-modal id="modal-new-project" ref="modalNewProject" title="Create New Project" v-on:ok="onCreateProject">
- <b-form @submit="onCreateProject" @input="onUserInput" novalidate>
- <b-form-group label="Project Name" label-for="new-project-name" v-bind:feedback="newProjectNameFeedback" v-bind:state="newProjectNameState">
- <b-form-input id="new-project-name"
- type="text" v-model="newProject.name" required
- placeholder="Project name"
- v-bind:state="newProjectNameState"></b-form-input>
- </b-form-group>
- <b-form-group label="Project Description" label-for="new-project-description">
- <b-form-textarea id="new-project-description"
- type="text" v-model="newProject.description"
- placeholder="(Optional) Project description"
- :rows="3"></b-form-textarea>
- </b-form-group>
- </b-form>
- </b-modal>
+ <project-button-new @new-project="onNewProject"/>
</div>
</div>
<div class="row">
@@ -40,6 +23,7 @@
</template>
<script>
+import ProjectButtonNew from './ProjectButtonNew.vue'
import ProjectList from './ProjectList.vue'
import { models, services } from 'django-airavata-api'
@@ -51,14 +35,12 @@ export default {
data () {
return {
projectsPaginator: null,
- newProject: new models.Project(),
- newProjectServerValidationData: null,
- userBeginsInput: false,
}
},
components: {
'project-list': ProjectList,
- 'pager': comps.Pager
+ 'project-button-new': ProjectButtonNew,
+ 'pager': comps.Pager,
},
methods: {
nextProjects: function(event) {
@@ -67,54 +49,15 @@ export default {
previousProjects: function(event) {
this.projectsPaginator.previous();
},
- onCreateProject: function(event) {
- // Prevent hiding modal, hide it programmatically when project gets created
- event.preventDefault();
- services.ProjectService.create(this.newProject)
- .then(result => {
- this.$refs.modalNewProject.hide();
- // Reset state
- this.newProject = new models.Project();
- this.userBeginsInput = false;
- // Reload the list of projects
- return services.ProjectService.list()
- .then(result => this.projectsPaginator = result);
- })
- .catch(error => {
- this.newProjectServerValidationData = error.data;
- });
- },
- onUserInput: function(event) {
- this.userBeginsInput = true;
- // Clear server side validation data when user starts typing again
- this.newProjectServerValidationData = null;
+ onNewProject: function(project) {
+ services.ProjectService.list()
+ .then(result => this.projectsPaginator = result);
},
},
computed: {
projects: function() {
return this.projectsPaginator ? this.projectsPaginator.results : null;
},
- newProjectValidationData: function() {
- return this.userBeginsInput ? this.newProject.validateForCreate() : null;
- },
- newProjectNameState: function() {
- if (this.newProjectServerValidationData && 'name' in this.newProjectServerValidationData) {
- return 'invalid';
- } else if (this.newProjectValidationData && 'name' in this.newProjectValidationData) {
- return 'invalid';
- } else {
- return null;
- }
- },
- newProjectNameFeedback: function() {
- if (this.newProjectServerValidationData && 'name' in this.newProjectServerValidationData) {
- return this.newProjectServerValidationData.name.join('; ');
- } else if (this.newProjectValidationData && 'name' in this.newProjectValidationData) {
- return this.newProjectValidationData.name.join('; ');
- } else {
- return null;
- }
- },
},
beforeMount: function () {
services.ProjectService.list(this.initialProjectsData)
--
To stop receiving notification emails like this one, please contact
['"commits@airavata.apache.org" <co...@airavata.apache.org>'].