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 2021/10/05 19:47:26 UTC
[airavata-django-portal] 15/24: AIRAVATA-3477 Wrapped
RangeSliderInputEditor as web component
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 9b4b123ae81e3a19cce4451a8a16e248ebef25ff
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Fri Sep 10 15:24:34 2021 -0400
AIRAVATA-3477 Wrapped RangeSliderInputEditor as web component
---
.../input-editors/RangeSliderInputEditor.vue | 71 ++++++++++++++++------
.../js/web-components/ComputeResourceSelector.vue | 7 ++-
.../ExperimentComputeResourceSelector.vue | 7 ++-
.../js/web-components/ExperimentEditor.vue | 4 +-
.../GroupResourceProfileSelector.vue | 7 ++-
.../js/web-components/ProjectSelector.vue | 7 ++-
.../js/web-components/QueueSettingsEditor.vue | 4 +-
.../input-editors/CheckboxInputEditor.vue | 4 +-
.../input-editors/FileInputEditor.vue | 4 +-
.../input-editors/MultiFileInputEditor.vue | 4 +-
.../input-editors/RadioButtonInputEditor.vue | 4 +-
.../input-editors/RangeSliderInputEditor.vue | 66 ++++++++++++++++++++
.../input-editors/StringInputEditor.vue | 4 +-
.../js/web-components/{styles.css => styles.scss} | 1 +
14 files changed, 155 insertions(+), 39 deletions(-)
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/RangeSliderInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/RangeSliderInputEditor.vue
index 8276bb2..cf8ec18 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/RangeSliderInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/RangeSliderInputEditor.vue
@@ -4,9 +4,9 @@
@change="onChange"
:state="componentValidState"
:disabled="readOnly"
- :min="min"
- :max="max"
- :interval="step"
+ :min="sliderMin"
+ :max="sliderMax"
+ :interval="sliderStep"
tooltip="always"
:tooltip-formatter="tooltipFormatter"
:enable-cross="false"
@@ -24,6 +24,22 @@ export default {
value: {
type: String,
},
+ min: Number,
+ max: Number,
+ step: Number,
+ valueFormat: {
+ type: String,
+ validator(value) {
+ return ["percentage"].indexOf(value) !== -1;
+ },
+ },
+ displayFormat: {
+ type: String,
+ validator(value) {
+ return ["percentage"].indexOf(value) !== -1;
+ },
+ },
+ delimiter: String,
},
components: {
VueSlider,
@@ -37,17 +53,31 @@ export default {
this.initializeSliderValues();
},
computed: {
- min: function () {
- return "min" in this.editorConfig ? this.editorConfig.min : 0;
+ sliderMin: function () {
+ return typeof this.min !== "undefined"
+ ? this.min
+ : "min" in this.editorConfig
+ ? this.editorConfig.min
+ : 0;
},
- max: function () {
- return "max" in this.editorConfig ? this.editorConfig.max : 100;
+ sliderMax: function () {
+ return typeof this.max !== "undefined"
+ ? this.max
+ : "max" in this.editorConfig
+ ? this.editorConfig.max
+ : 100;
},
- step: function () {
- return "step" in this.editorConfig ? this.editorConfig.step : 1;
+ sliderStep: function () {
+ return typeof this.step !== "undefined"
+ ? this.step
+ : "step" in this.editorConfig
+ ? this.editorConfig.step
+ : 1;
},
- delimiter() {
- return "delimiter" in this.editorConfig
+ sliderDelimiter() {
+ return this.delimiter
+ ? this.delimiter
+ : "delimiter" in this.editorConfig
? this.editorConfig.delimiter
: "-";
},
@@ -64,9 +94,8 @@ export default {
parseValue(value) {
// Just remove any percentage signs
const result = value
- .replaceAll("%", "")
- .split(this.delimiter)
- .map(parseFloat);
+ ? value.replaceAll("%", "").split(this.sliderDelimiter).map(parseFloat)
+ : [];
return result.length === 2 && !isNaN(result[0]) && !isNaN(result[1])
? result
: [this.min, this.max];
@@ -76,7 +105,11 @@ export default {
this.valueChanged();
},
tooltipFormatter(value) {
- if ("displayFormat" in this.editorConfig) {
+ if (this.displayFormat) {
+ if (this.displayFormat === "percentage") {
+ return `${value}%`;
+ }
+ } else if ("displayFormat" in this.editorConfig) {
if (this.editorConfig.displayFormat.percentage) {
return `${value}%`;
}
@@ -85,12 +118,16 @@ export default {
},
formatValue(value) {
let values = value.map(String);
- if ("valueFormat" in this.editorConfig) {
+ if (this.valueFormat) {
+ if (this.valueFormat === "percentage") {
+ values = values.map((v) => `${v}%`);
+ }
+ } else if ("valueFormat" in this.editorConfig) {
if (this.editorConfig.valueFormat.percentage) {
values = values.map((v) => `${v}%`);
}
}
- return values.join(this.delimiter);
+ return values.join(this.sliderDelimiter);
},
},
watch: {
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ComputeResourceSelector.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ComputeResourceSelector.vue
index 463d6f8..60ff2a1 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ComputeResourceSelector.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ComputeResourceSelector.vue
@@ -87,6 +87,9 @@ export default {
};
</script>
-<style>
-@import "./styles.css";
+<style lang="scss">
+@import "./styles";
+:host {
+ display: block;
+}
</style>
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentComputeResourceSelector.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentComputeResourceSelector.vue
index fe17520..1121fe0 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentComputeResourceSelector.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentComputeResourceSelector.vue
@@ -35,6 +35,9 @@ export default {
};
</script>
-<style>
-@import "./styles.css";
+<style lang="scss">
+@import "./styles";
+:host {
+ display: block;
+}
</style>
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 339e02e..e235303 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
@@ -297,8 +297,8 @@ export default {
};
</script>
-<style>
-@import "./styles.css";
+<style lang="scss">
+@import "./styles";
:host {
display: block;
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/GroupResourceProfileSelector.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/GroupResourceProfileSelector.vue
index 2858629..bb58621 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/GroupResourceProfileSelector.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/GroupResourceProfileSelector.vue
@@ -87,6 +87,9 @@ export default {
};
</script>
-<style>
-@import url("./styles.css");
+<style lang="scss">
+@import "./styles";
+:host {
+ display: block;
+}
</style>
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ProjectSelector.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ProjectSelector.vue
index 797f4e3..801453c 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ProjectSelector.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ProjectSelector.vue
@@ -87,6 +87,9 @@ export default {
};
</script>
-<style>
-@import url("./styles.css");
+<style lang="scss">
+@import "./styles";
+:host {
+ display: block;
+}
</style>
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue
index 61f2be1..5c69076 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue
@@ -199,8 +199,8 @@ export default {
};
</script>
-<style>
-@import url("./styles.css");
+<style lang="scss">
+@import "./styles";
:host {
display: block;
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/CheckboxInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/CheckboxInputEditor.vue
index e44132a..7d54188 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/CheckboxInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/CheckboxInputEditor.vue
@@ -37,8 +37,8 @@ export default {
};
</script>
-<style>
-@import "../styles.css";
+<style lang="scss">
+@import "../styles";
:host {
display: block;
}
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/FileInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/FileInputEditor.vue
index 868415c..c8201ab 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/FileInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/FileInputEditor.vue
@@ -30,8 +30,8 @@ export default {
};
</script>
-<style>
-@import "../styles.css";
+<style lang="scss">
+@import "../styles";
@import "~@uppy/core/dist/style.min.css";
@import "~@uppy/status-bar/dist/style.min.css";
@import "~@uppy/drag-drop/dist/style.min.css";
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/MultiFileInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/MultiFileInputEditor.vue
index 420774c..c8ee002 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/MultiFileInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/MultiFileInputEditor.vue
@@ -30,8 +30,8 @@ export default {
};
</script>
-<style>
-@import "../styles.css";
+<style lang="scss">
+@import "../styles";
@import "~@uppy/core/dist/style.min.css";
@import "~@uppy/status-bar/dist/style.min.css";
@import "~@uppy/drag-drop/dist/style.min.css";
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RadioButtonInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RadioButtonInputEditor.vue
index 9acf8d2..6dd9ca5 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RadioButtonInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RadioButtonInputEditor.vue
@@ -37,8 +37,8 @@ export default {
};
</script>
-<style>
-@import "../styles.css";
+<style lang="scss">
+@import "../styles";
:host {
display: block;
}
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RangeSliderInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RangeSliderInputEditor.vue
new file mode 100644
index 0000000..296b264
--- /dev/null
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RangeSliderInputEditor.vue
@@ -0,0 +1,66 @@
+<template>
+ <range-slider-input-editor
+ v-if="experimentInput"
+ :id="id"
+ :value="data"
+ :experiment-input="experimentInput"
+ :read-only="readOnly"
+ :min="min"
+ :max="max"
+ :step="step"
+ :value-format="valueFormat"
+ :display-format="displayFormat"
+ :delimiter="delimiter"
+ @input="valueChanged"
+ />
+</template>
+
+<script>
+import RangeSliderInputEditor from "../../components/experiment/input-editors/RangeSliderInputEditor.vue";
+import WebComponentInputEditorMixin from "./WebComponentInputEditorMixin.js";
+
+export default {
+ mixins: [WebComponentInputEditorMixin],
+ props: {
+ // Explicit copy props from mixin, workaround for bug, see
+ // https://github.com/vuejs/vue-web-component-wrapper/issues/30#issuecomment-427350734
+ // for more details
+ ...WebComponentInputEditorMixin.props,
+ min: {
+ type: Number,
+ },
+ max: {
+ type: Number,
+ },
+ step: {
+ type: Number,
+ },
+ valueFormat: {
+ type: String,
+ validator(value) {
+ return ["percentage"].indexOf(value) !== -1;
+ },
+ },
+ displayFormat: {
+ type: String,
+ validator(value) {
+ return ["percentage"].indexOf(value) !== -1;
+ },
+ },
+ delimiter: String,
+ },
+ components: {
+ RangeSliderInputEditor,
+ },
+};
+</script>
+
+<style lang="scss">
+@import "../styles";
+// Need to explicitly import VueSlider's CSS because importing component scss doesn't work
+// https://github.com/vuejs/vue-web-component-wrapper/issues/12
+@import "~vue-slider-component/dist-css/vue-slider-component.css";
+:host {
+ display: block;
+}
+</style>
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/StringInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/StringInputEditor.vue
index ee825cf..2f34fd1 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/StringInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/StringInputEditor.vue
@@ -33,8 +33,8 @@ export default {
};
</script>
-<style>
-@import "../styles.css";
+<style lang="scss">
+@import "../styles";
:host {
display: block;
}
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/styles.css b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/styles.scss
similarity index 85%
rename from django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/styles.css
rename to django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/styles.scss
index bf593cb..62e5639 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/styles.css
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/styles.scss
@@ -2,3 +2,4 @@
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-vue/dist/bootstrap-vue.css";
@import "~@fortawesome/fontawesome-free/css/all.css";
+@import "../../../scss/styles";