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 2019/04/16 15:57:26 UTC

[airavata-django-portal] branch master updated: AIRAVATA-2632 Experiment description editor

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 a50c2ca  AIRAVATA-2632 Experiment description editor
a50c2ca is described below

commit a50c2ca037f38590d7fe02731a8e69531ff9a34f
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Tue Apr 16 11:57:02 2019 -0400

    AIRAVATA-2632 Experiment description editor
---
 .../experiment/ExperimentDescriptionEditor.vue     | 77 ++++++++++++++++++++++
 .../js/components/experiment/ExperimentEditor.vue  |  3 +
 2 files changed, 80 insertions(+)

diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentDescriptionEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentDescriptionEditor.vue
new file mode 100644
index 0000000..23c391e
--- /dev/null
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentDescriptionEditor.vue
@@ -0,0 +1,77 @@
+<template>
+
+  <b-form-group
+    v-if="isEditing"
+    label="Experiment Description"
+    label-for="experiment-description"
+  >
+    <b-form-textarea
+      id="experiment-description"
+      v-model="data"
+      rows="3"
+    ></b-form-textarea>
+    <div class="mt-1">
+      <b-button
+        variant="success"
+        size="sm"
+        @click="toggleEditing"
+      >Save description</b-button>
+      <b-link
+        @click="cancelEditing"
+        title="Cancel editing"
+        class="text-secondary ml-3"
+      >
+        <i class="fas fa-times"></i>
+        <span class="sr-only">Cancel editing</span>
+      </b-link>
+    </div>
+  </b-form-group>
+  <div
+    v-else
+    class="mb-3"
+  >
+    <b-link
+      @click="startEditing"
+      class="d-inline-block text-body mb-1"
+    >
+      <i class="fas fa-align-left"></i>
+      <span v-if="data"> Edit the description</span>
+      <span v-else> Add a description</span>
+    </b-link>
+    <div
+      v-if="data"
+      class="ml-3"
+    >
+      {{ data }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixins } from "django-airavata-common-ui";
+
+export default {
+  name: "experiment-description-editor",
+  mixins: [mixins.VModelMixin],
+  data() {
+    return {
+      isEditing: false,
+      originalValue: this.value
+    };
+  },
+  methods: {
+    toggleEditing() {
+      this.isEditing = !this.isEditing;
+    },
+    startEditing() {
+      this.originalValue = this.data;
+      this.isEditing = true;
+    },
+    cancelEditing() {
+      this.data = this.originalValue;
+      this.isEditing = false;
+    }
+  }
+};
+</script>
+
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentEditor.vue
index 337d118..8754d60 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentEditor.vue
@@ -39,6 +39,7 @@
               :state="getValidationState('experimentName')"
             ></b-form-input>
           </b-form-group>
+          <experiment-description-editor v-model="localExperiment.description"/>
         </div>
       </div>
       <div class="row">
@@ -143,6 +144,7 @@
 
 <script>
 import ComputationalResourceSchedulingEditor from "./ComputationalResourceSchedulingEditor.vue";
+import ExperimentDescriptionEditor from "./ExperimentDescriptionEditor.vue";
 import GroupResourceProfileSelector from "./GroupResourceProfileSelector.vue";
 import InputEditorContainer from "./input-editors/InputEditorContainer.vue";
 import { models, services, utils as apiUtils } from "django-airavata-api";
@@ -169,6 +171,7 @@ export default {
   },
   components: {
     ComputationalResourceSchedulingEditor,
+    ExperimentDescriptionEditor,
     GroupResourceProfileSelector,
     InputEditorContainer,
     "share-button": components.ShareButton