[airavata-django-portal] branch airavata-3453 updated: AIRAVATA-3453 Adding bootstrap styling to exp name

[ma...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

machristie pushed a commit to branch airavata-3453
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git


The following commit(s) were added to refs/heads/airavata-3453 by this push:
     new e1b38f1  AIRAVATA-3453 Adding bootstrap styling to exp name
e1b38f1 is described below

commit e1b38f177e2ae4f5e9cb0df04ef4de4cc54b7a43
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Wed May 26 17:08:49 2021 -0400

    AIRAVATA-3453 Adding bootstrap styling to exp name
---
 .../js/web-components/ExperimentEditor.vue         | 26 +++++++++++++++-------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
index e7acb23..7cfa7f2 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
@@ -2,17 +2,21 @@
   <form v-if="experiment" @submit.prevent="onSubmit">
     <div @input="updateExperimentName">
       <slot name="experiment-name">
-        <input
-          type="text"
-          name="experiment-name"
-          :value="experiment.experimentName"
-        />
+        <b-form-group label="Experiment Name" label-for="experiment-name">
+          <b-form-input
+            type="text"
+            name="experiment-name"
+            :value="experiment.experimentName"
+            required
+          >
+          </b-form-input>
+        </b-form-group>
       </slot>
     </div>
     <div @input="updateProjectId">
       <!-- TODO: define this as a native slot? -->
       <slot name="experiment-project">
-        <adpf-project-selector :value="experiment.projectId"/>
+        <adpf-project-selector :value="experiment.projectId" />
       </slot>
     </div>
     <template v-for="input in experiment.experimentInputs">
@@ -21,7 +25,7 @@
         :key="input.name"
         @input="updateInputValue(input.name, $event.target.value)"
       >
-      <!-- programmatically define slots as native slots (not Vue slots), see #mounted() -->
+        <!-- programmatically define slots as native slots (not Vue slots), see #mounted() -->
       </div>
     </template>
     <div @input="updateUserConfigurationData">
@@ -43,6 +47,10 @@ import {
   getExperiment,
 } from "./store";
 
+import Vue from "vue";
+import { BootstrapVue } from "bootstrap-vue";
+Vue.use(BootstrapVue);
+
 export default {
   props: {
     // TODO: rename to applicationModuleId?
@@ -97,7 +105,9 @@ export default {
       this.experiment.experimentName = event.target.value;
     },
     updateInputValue(inputName, value) {
-      const experimentInput = this.experiment.experimentInputs.find(i => i.name === inputName);
+      const experimentInput = this.experiment.experimentInputs.find(
+        (i) => i.name === inputName
+      );
       experimentInput.value = value;
     },
     updateProjectId(event) {