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 2018/09/11 17:12:04 UTC
[airavata-django-portal] 16/28: AIRAVATA-2876 Dragging improvements
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 <ma...@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'