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 15d31bd AIRAVATA-2539 Refactored new project, edit project UIs
15d31bd is described below
commit 15d31bd86a0420d6a2b2d9faa65ba31d565ccad5
Author: Marcus Christie <[email protected]>
AuthorDate: Thu Apr 25 16:11:27 2019 -0400
AIRAVATA-2539 Refactored new project, edit project UIs
---
.../js/components/project/ProjectButtonNew.vue | 159 +++++++++------------
.../js/components/project/ProjectEditor.vue | 119 +++++++++------
.../js/containers/EditProjectContainer.vue | 29 ++--
3 files changed, 155 insertions(+), 152 deletions(-)
diff --git
a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/project/ProjectButtonNew.vue
b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/project/ProjectButtonNew.vue
index ffa40d2..c86701e 100644
---
a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/project/ProjectButtonNew.vue
+++
b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/project/ProjectButtonNew.vue
@@ -1,103 +1,74 @@
<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"
v-bind:cancel-disabled="cancelDisabled"
- v-bind:ok-disabled="okDisabled">
- <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>
+ <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"
+ v-bind:ok-disabled="okDisabled"
+ @cancel="onCancelNewProject"
+ >
+ <project-editor
+ v-model="newProject"
+ ref="projectEditor"
+ @save="onCreateProject"
+ @valid="valid = true"
+ @invalid="valid = false"
+ >
+ <div slot="title"></div>
+ </project-editor>
+ </b-modal>
+ </div>
</template>
<script>
-
-import { models, services } from 'django-airavata-api'
+import { models, services } from "django-airavata-api";
+import ProjectEditor from "./ProjectEditor.vue";
export default {
- name: 'project-button-new',
- data () {
- return {
- newProject: new models.Project(),
- newProjectServerValidationData: null,
- userBeginsInput: false,
- loading: false,
- }
- },
- components: {
- },
- methods: {
- onCreateProject: function(event) {
- // Prevent hiding modal, hide it programmatically when project
gets created
- event.preventDefault();
- this.loading = true;
- services.ProjectService.create({data: 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;
- })
- .then(() => this.loading = false, () => this.loading = false);
- },
- onUserInput: function() {
- this.userBeginsInput = true;
- // Clear server side validation data when user starts typing again
- this.newProjectServerValidationData = null;
- },
- },
- computed: {
- newProjectValidationData: function() {
- return this.userBeginsInput ? this.newProject.validate() : 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;
- }
- },
- formIsValid: function() {
- return this.newProjectNameState == null;
- },
- cancelDisabled: function() {
- return this.loading;
- },
- okDisabled: function() {
- return this.loading || !this.userBeginsInput || !this.formIsValid;
- }
+ name: "project-button-new",
+ data() {
+ return {
+ valid: false,
+ newProject: new models.Project()
+ };
+ },
+ components: {
+ ProjectEditor
+ },
+ methods: {
+ onCreateProject: function(event) {
+ // Prevent hiding modal, hide it programmatically when project gets
created
+ event.preventDefault();
+ services.ProjectService.create({ data: this.newProject }).then(result =>
{
+ this.$refs.modalNewProject.hide();
+ this.$emit("new-project", result);
+ // Reset state
+ this.newProject = new models.Project();
+ this.$refs.projectEditor.reset();
+ });
},
-}
+ onCancelNewProject() {
+ this.newProject = new models.Project();
+ this.$refs.projectEditor.reset();
+ }
+ },
+ computed: {
+ okDisabled: function() {
+ return !this.valid;
+ }
+ }
+};
</script>
diff --git
a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/project/ProjectEditor.vue
b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/project/ProjectEditor.vue
index 3cbe34d..8df9cd0 100644
---
a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/project/ProjectEditor.vue
+++
b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/project/ProjectEditor.vue
@@ -1,43 +1,43 @@
<template>
<div>
- <div class="row">
- <div class="col-auto mr-auto">
- <h1 class="h4 mb-4">
- <slot name="title">Edit Project</slot>
- </h1>
- </div>
- </div>
- <div class="row">
- <div class="col">
- <b-form-group
- label="Project Name"
- label-for="project-name"
- :feedback="nameFeedback"
+ <slot name="title">
+ <h1 class="h4 mb-4">
+ Edit Project
+ </h1>
+ </slot>
+ <b-form
+ @submit="onSubmit"
+ @input="onUserInput"
+ novalidate
+ >
+ <b-form-group
+ label="Project Name"
+ label-for="project-name"
+ :feedback="nameFeedback"
+ :state="nameState"
+ >
+ <b-form-input
+ id="project-name"
+ type="text"
+ v-model="data.name"
+ required
+ placeholder="Project name"
:state="nameState"
- >
- <b-form-input
- id="project-name"
- type="text"
- v-model="data.name"
- required
- placeholder="Project name"
- :state="nameState"
- ></b-form-input>
- </b-form-group>
- <b-form-group
- label="Project Description"
- label-for="project-description"
- >
- <b-form-textarea
- id="project-description"
- type="text"
- v-model="data.description"
- placeholder="(Optional) Project description"
- :rows="3"
- ></b-form-textarea>
- </b-form-group>
- </div>
- </div>
+ ></b-form-input>
+ </b-form-group>
+ <b-form-group
+ label="Project Description"
+ label-for="project-description"
+ >
+ <b-form-textarea
+ id="project-description"
+ type="text"
+ v-model="data.description"
+ placeholder="(Optional) Project description"
+ :rows="3"
+ ></b-form-textarea>
+ </b-form-group>
+ </b-form>
</div>
</template>
@@ -56,28 +56,59 @@ export default {
},
mounted() {
this.$on("input", this.validate);
+ this.validate();
},
data() {
return {
- validation: {
- name: null
- }
+ userBeginsInput: false
};
},
computed: {
nameFeedback() {
- if (this.validation.name) {
+ if (this.userBeginsInput && this.validation.name) {
return this.validation.name.join("; ");
+ } else {
+ return null;
}
},
nameState() {
- return !this.validation.name || this.validation.name.length === 0;
+ if (this.validation.name) {
+ if (this.userBeginsInput) {
+ return false;
+ } else {
+ return null;
+ }
+ } else {
+ return true;
+ }
+ },
+ validation() {
+ const v = this.data.validate();
+ return v ? v : {};
}
},
methods: {
validate() {
- const v = this.data.validate();
- this.validation = v ? v : {};
+ if (Object.keys(this.validation).length > 0) {
+ this.$emit("invalid");
+ } else {
+ this.$emit("valid");
+ }
+ },
+ onUserInput() {
+ this.userBeginsInput = true;
+ },
+ onSubmit(event) {
+ event.preventDefault();
+ this.$emit("save");
+ },
+ reset() {
+ this.userBeginsInput = false;
+ }
+ },
+ watch: {
+ value() {
+ this.validate();
}
}
};
diff --git
a/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/EditProjectContainer.vue
b/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/EditProjectContainer.vue
index 086e045..ecf6251 100644
---
a/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/EditProjectContainer.vue
+++
b/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/EditProjectContainer.vue
@@ -1,14 +1,9 @@
<template>
- <div>
- <div class="row">
- <div class="col">
- <project-editor v-if="project" v-model="project" />
- </div>
- </div>
- <div class="row">
- <div class="col">
- <b-button @click="saveProject" variant="primary">Save</b-button>
- </div>
+ <div v-if="project">
+ <project-editor v-model="project" @save="saveProject" @valid="valid =
true" @invalid="valid = false"/>
+ <div class="d-flex justify-content-end">
+ <b-button @click="saveProject" variant="primary"
:disabled="!valid">Save</b-button>
+ <b-button @click="cancel" variant="secondary">Cancel</b-button>
</div>
</div>
</template>
@@ -29,6 +24,7 @@ export default {
data() {
return {
project: null,
+ valid: false
};
},
components: {
@@ -40,10 +36,15 @@ export default {
},
methods: {
saveProject() {
- services.ProjectService.update({lookup: this.projectId, data:
this.project})
- .then(() => {
- urls.navigateToProjectsList();
- });
+ if (this.valid) {
+ services.ProjectService.update({lookup: this.projectId, data:
this.project})
+ .then(() => {
+ urls.navigateToProjectsList();
+ });
+ }
+ },
+ cancel() {
+ urls.navigateToProjectsList();
}
}
};
