airavata-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From machris...@apache.org
Subject [airavata-django-portal] 16/28: AIRAVATA-2876 Dragging improvements
Date Tue, 11 Sep 2018 17:12:04 GMT
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

commit 732d80618536927c942647521dc4d759fa564643
Author: Marcus Christie <machrist@iu.edu>
AuthorDate: Wed Sep 5 10:57:11 2018 -0400

    AIRAVATA-2876 Dragging improvements
---
 django_airavata/apps/admin/package-lock.json       | 26 +++++++
 django_airavata/apps/admin/package.json            |  3 +
 .../applications/ApplicationInputFieldEditor.vue   | 81 ++++++++++++----------
 .../applications/ApplicationInterfaceEditor.vue    | 16 ++++-
 .../admin/static/django_airavata_admin/src/main.js |  8 +++
 5 files changed, 95 insertions(+), 39 deletions(-)

diff --git a/django_airavata/apps/admin/package-lock.json b/django_airavata/apps/admin/package-lock.json
index 2a80427..725c86a 100644
--- a/django_airavata/apps/admin/package-lock.json
+++ b/django_airavata/apps/admin/package-lock.json
@@ -4,6 +4,32 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.4.tgz",
+      "integrity": "sha512-0qbIVm+MzkxMwKDx8V0C7w/6Nk+ZfBseOn2R1YK0f2DQP5pBcOQbu9NmaVaLzbJK6VJb1TuyTf0ZF97rc6iWJQ=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.4.tgz",
+      "integrity": "sha512-oGtnwcdhJomoDxbJcy6S0JxK6ItDhJLNOujm+qILPqajJ2a0P/YRomzBbixFjAPquCoyPUlA9g9ejA22P7TKNA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.4"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.3.1.tgz",
+      "integrity": "sha512-NkiLBFoiHtJ89cPJdM+W6cLvTVKkLh3j9t3MxkXyip0ncdD3lhCunSuzvFcrTHWeETEyoClGd8ZIWrr3HFZ3BA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.4"
+      }
+    },
+    "@fortawesome/vue-fontawesome": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.1.tgz",
+      "integrity": "sha512-dvPpA9eI18bWr3E+c0JvCYD6xl/keEj0ICTMShUPbxsGkd6PdFU9xYjqA8qE8ahsY+xhbQzZt/k1FKlpMGaRXA=="
+    },
     "@sindresorhus/is": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
diff --git a/django_airavata/apps/admin/package.json b/django_airavata/apps/admin/package.json
index ccae111..dc6a771 100644
--- a/django_airavata/apps/admin/package.json
+++ b/django_airavata/apps/admin/package.json
@@ -11,6 +11,9 @@
     "watch": "cross-env WEBPACK_WATCH=true node static/django_airavata_admin/build/build.js"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.4",
+    "@fortawesome/free-solid-svg-icons": "^5.3.1",
+    "@fortawesome/vue-fontawesome": "^0.1.1",
     "bootstrap": "^4.0.0",
     "bootstrap-vue": "^2.0.0-rc.11",
     "django-airavata-api": "file:../api",
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue
b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue
index 1694345..0730ae4 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue
@@ -1,51 +1,57 @@
 <template>
   <b-card>
     <div class="d-flex align-items-center" slot="header">
+      <div class="drag-handle mr-1 text-muted">
+        <font-awesome-icon icon="grip-vertical" />
+        <span class="sr-only">Drag handle for reordering</span>
+      </div>
       <div class="mr-auto">Input Field: {{ data.name }}</div>
       <b-link class="text-secondary" @click="deleteApplicationInput">
         <i class="fa fa-trash"></i>
         <span class="sr-only">Delete</span>
       </b-link>
     </div>
-    <b-form-group label="Name" :label-for="id+'-name'">
-      <b-form-input :id="id+'-name'" type="text" v-model="data.name" ref="nameInput" required></b-form-input>
-    </b-form-group>
-    <b-form-group label="Initial Value" :label-for="id+'-value'">
-      <b-form-input :id="id+'-value'" type="text" v-model="data.value"></b-form-input>
-    </b-form-group>
-    <b-form-group label="Type" :label-for="id+'-type'">
-      <b-form-select :id="id+'-type'" v-model="data.type" :options="inputTypeOptions"
/>
-    </b-form-group>
-    <b-form-group label="Application Argument" :label-for="id+'-argument'">
-      <b-form-input :id="id+'-argument'" type="text" v-model="data.applicationArgument"></b-form-input>
-    </b-form-group>
-    <div class="d-flex">
-      <b-form-group class="flex-fill" label="Standard Input" :label-for="id+'-standard-input'">
-        <b-form-radio-group :id="id+'-standard-input'" v-model="data.standardInput" :options="trueFalseOptions">
-        </b-form-radio-group>
+    <b-collapse :visible="!collapse">
+      <b-form-group label="Name" :label-for="id+'-name'">
+        <b-form-input :id="id+'-name'" type="text" v-model="data.name" ref="nameInput"
required></b-form-input>
       </b-form-group>
-      <b-form-group class="flex-fill" label="Read Only" :label-for="id+'-read-only'">
-        <b-form-radio-group :id="id+'-read-only'" v-model="data.isReadOnly" :options="trueFalseOptions">
-        </b-form-radio-group>
+      <b-form-group label="Initial Value" :label-for="id+'-value'">
+        <b-form-input :id="id+'-value'" type="text" v-model="data.value"></b-form-input>
       </b-form-group>
-    </div>
-    <b-form-group label="User Friendly Description" :label-for="id+'-user-friendly-description'">
-      <b-form-textarea :id="id+'-user-friendly-description'" v-model="data.userFriendlyDescription"
:rows="3" />
-    </b-form-group>
-    <div class="d-flex">
-      <b-form-group class="flex-fill" label="Data is staged" :label-for="id+'-data-staged'">
-        <b-form-radio-group :id="id+'-data-staged'" v-model="data.dataStaged" :options="trueFalseOptions">
-        </b-form-radio-group>
+      <b-form-group label="Type" :label-for="id+'-type'">
+        <b-form-select :id="id+'-type'" v-model="data.type" :options="inputTypeOptions"
/>
+      </b-form-group>
+      <b-form-group label="Application Argument" :label-for="id+'-argument'">
+        <b-form-input :id="id+'-argument'" type="text" v-model="data.applicationArgument"></b-form-input>
       </b-form-group>
-      <b-form-group class="flex-fill" label="Required" :label-for="id+'-required'">
-        <b-form-radio-group :id="id+'-required'" v-model="data.isRequired" :options="trueFalseOptions">
+      <div class="d-flex">
+        <b-form-group class="flex-fill" label="Standard Input" :label-for="id+'-standard-input'">
+          <b-form-radio-group :id="id+'-standard-input'" v-model="data.standardInput"
:options="trueFalseOptions">
+          </b-form-radio-group>
+        </b-form-group>
+        <b-form-group class="flex-fill" label="Read Only" :label-for="id+'-read-only'">
+          <b-form-radio-group :id="id+'-read-only'" v-model="data.isReadOnly" :options="trueFalseOptions">
+          </b-form-radio-group>
+        </b-form-group>
+      </div>
+      <b-form-group label="User Friendly Description" :label-for="id+'-user-friendly-description'">
+        <b-form-textarea :id="id+'-user-friendly-description'" v-model="data.userFriendlyDescription"
:rows="3" />
+      </b-form-group>
+      <div class="d-flex">
+        <b-form-group class="flex-fill" label="Data is staged" :label-for="id+'-data-staged'">
+          <b-form-radio-group :id="id+'-data-staged'" v-model="data.dataStaged" :options="trueFalseOptions">
+          </b-form-radio-group>
+        </b-form-group>
+        <b-form-group class="flex-fill" label="Required" :label-for="id+'-required'">
+          <b-form-radio-group :id="id+'-required'" v-model="data.isRequired" :options="trueFalseOptions">
+          </b-form-radio-group>
+        </b-form-group>
+      </div>
+      <b-form-group class="flex-fill" label="Required on Command Line" :label-for="id+'-required-command-line'">
+        <b-form-radio-group :id="id+'-required-command-line'" v-model="data.requiredToAddedToCommandLine"
:options="trueFalseOptions">
         </b-form-radio-group>
       </b-form-group>
-    </div>
-    <b-form-group class="flex-fill" label="Required on Command Line" :label-for="id+'-required-command-line'">
-      <b-form-radio-group :id="id+'-required-command-line'" v-model="data.requiredToAddedToCommandLine"
:options="trueFalseOptions">
-      </b-form-radio-group>
-    </b-form-group>
+    </b-collapse>
   </b-card>
 </template>
 
@@ -66,6 +72,9 @@ export default {
     // Whether to put focus on the name field when mounting component
     focus: {
       type: Boolean
+    },
+    collapse: {
+      type: Boolean
     }
   },
   computed: {
@@ -102,8 +111,8 @@ export default {
 </script>
 
 <style scoped>
-.flex-fill {
-  flex: 1;
+.drag-handle {
+  cursor: move;
 }
 </style>
 
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInterfaceEditor.vue
b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInterfaceEditor.vue
index 4a880be..8d2789c 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInterfaceEditor.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInterfaceEditor.vue
@@ -26,8 +26,8 @@
         <h1 class="h5 mb-4">
           Input Fields
         </h1>
-        <draggable v-model="data.applicationInputs">
-          <application-input-field-editor v-for="(input, index) in data.applicationInputs"
:value="input" :key="index" :id="'app-input-'+index" :focus="index === focusApplicationInputIndex"
@input="updatedInput($event, index)" @delete="deleteInput($event, index)" />
+        <draggable v-model="data.applicationInputs" :options="dragOptions" @start="onDragStart"
@end="onDragEnd">
+          <application-input-field-editor v-for="(input, index) in data.applicationInputs"
:value="input" :key="index" :id="'app-input-'+index" :focus="index === focusApplicationInputIndex"
:collapse="collapseApplicationInputs" @input="updatedInput($event, index)" @delete="deleteInput($event,
index)" />
         </draggable>
       </div>
     </div>
@@ -77,7 +77,11 @@ export default {
   },
   data() {
     return {
-      focusApplicationInputIndex: null
+      focusApplicationInputIndex: null,
+      dragOptions: {
+        handle: ".drag-handle"
+      },
+      collapseApplicationInputs: false
     };
   },
   methods: {
@@ -97,6 +101,12 @@ export default {
     },
     deleteInput(e, index) {
       this.data.applicationInputs.splice(index, 1);
+    },
+    onDragStart() {
+      this.collapseApplicationInputs = true;
+    },
+    onDragEnd() {
+      this.collapseApplicationInputs = false;
     }
   }
 };
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/main.js b/django_airavata/apps/admin/static/django_airavata_admin/src/main.js
index 640b5a9..3c49b77 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/main.js
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/main.js
@@ -11,6 +11,14 @@ import BootstrapVue from 'bootstrap-vue'
 // TODO: load the latest bootstrap css globally
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
+import { library as faLibrary } from '@fortawesome/fontawesome-svg-core'
+import { faGripVertical } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+faLibrary.add(faGripVertical)
+
+Vue.component('font-awesome-icon', FontAwesomeIcon)
+
 
 import { components, errors } from 'django-airavata-common-ui'
 


Mime
View raw message